Route Dashboard schedule and history
This commit is contained in:
Yang Li
parent
f7c351b161
commit
2fc3adfaec
BIN
app/.DS_Store
vendored
BIN
app/.DS_Store
vendored
Binary file not shown.
@ -1,16 +1,16 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.184a423c.css",
|
||||
"main.js": "/static/js/main.6094576b.js",
|
||||
"main.css": "/static/css/main.bbcd4e86.css",
|
||||
"main.js": "/static/js/main.8f60a967.js",
|
||||
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
|
||||
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
|
||||
"index.html": "/index.html",
|
||||
"main.184a423c.css.map": "/static/css/main.184a423c.css.map",
|
||||
"main.6094576b.js.map": "/static/js/main.6094576b.js.map",
|
||||
"main.bbcd4e86.css.map": "/static/css/main.bbcd4e86.css.map",
|
||||
"main.8f60a967.js.map": "/static/js/main.8f60a967.js.map",
|
||||
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.184a423c.css",
|
||||
"static/js/main.6094576b.js"
|
||||
"static/css/main.bbcd4e86.css",
|
||||
"static/js/main.8f60a967.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6094576b.js"></script><link href="/static/css/main.184a423c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.8f60a967.js"></script><link href="/static/css/main.bbcd4e86.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
BIN
client/.DS_Store
vendored
BIN
client/.DS_Store
vendored
Binary file not shown.
@ -1,16 +1,16 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.184a423c.css",
|
||||
"main.js": "/static/js/main.6094576b.js",
|
||||
"main.css": "/static/css/main.bbcd4e86.css",
|
||||
"main.js": "/static/js/main.8f60a967.js",
|
||||
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
|
||||
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
|
||||
"index.html": "/index.html",
|
||||
"main.184a423c.css.map": "/static/css/main.184a423c.css.map",
|
||||
"main.6094576b.js.map": "/static/js/main.6094576b.js.map",
|
||||
"main.bbcd4e86.css.map": "/static/css/main.bbcd4e86.css.map",
|
||||
"main.8f60a967.js.map": "/static/js/main.8f60a967.js.map",
|
||||
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.184a423c.css",
|
||||
"static/js/main.6094576b.js"
|
||||
"static/css/main.bbcd4e86.css",
|
||||
"static/js/main.8f60a967.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6094576b.js"></script><link href="/static/css/main.184a423c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.8f60a967.js"></script><link href="/static/css/main.bbcd4e86.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
@ -7,6 +7,7 @@ body {
|
||||
color: white;
|
||||
height: 35px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
@ -282,11 +283,14 @@ legend {
|
||||
} */
|
||||
|
||||
.card-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: .8em;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.card-status {
|
||||
@ -357,7 +361,7 @@ table tr th {
|
||||
|
||||
table tr td {
|
||||
border: 1px solid white;
|
||||
padding-left: 16px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
min-width: 250px;
|
||||
@ -446,6 +450,25 @@ table .group td {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.multi-columns-container {
|
||||
display: flex;
|
||||
background: #D0E1F8;
|
||||
padding: 24px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column-card {
|
||||
background: white;
|
||||
padding:24px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.app-main-content-fields-section .field-value {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
@ -455,7 +478,16 @@ table .group td {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section .react-datepicker-wrapper {
|
||||
.app-main-content-fields-section.short .field-body {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.short {
|
||||
margin-bottom: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.with-function .react-datepicker-wrapper {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
@ -464,6 +496,16 @@ table .group td {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.dropdown-container input[type=text] {
|
||||
width: 210px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.dropdown-container select {
|
||||
width: 210px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.with-function .react-datepicker-wrapper input[type=text] {
|
||||
height: 35px;
|
||||
width: 120px;
|
||||
@ -594,6 +636,25 @@ input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rs__cell button {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
.rs__cell button p {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rs__multi_day {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.btn-no-deco {
|
||||
text-decoration: none!important;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.personnel-info-table .red {
|
||||
background: #dc3545;
|
||||
color: rgb(25, 23, 23);
|
||||
@ -603,6 +664,12 @@ input[type="checkbox"] {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.personnel-info-table .status-tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.personnel-info-table .dark-red {
|
||||
background: #7c0d0e;
|
||||
color: #fff;
|
||||
@ -657,6 +724,29 @@ input[type="checkbox"] {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.all-routes-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.route-card-container {
|
||||
flex-basis: 19%;
|
||||
margin-right: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.route-stats {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.route-card-title {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.medical ul li {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
@ -1051,6 +1141,20 @@ input[type="checkbox"] {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1240px) {
|
||||
.route-card-container {
|
||||
flex-basis: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 910px) {
|
||||
.route-card-container {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2000px) {
|
||||
/* .container {
|
||||
max-width: 1920px;
|
||||
|
||||
@ -6,7 +6,7 @@ import { AuthService, CustomerService, EventRequestsService, EventsService, Reso
|
||||
import Select from 'react-select';
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
|
||||
|
||||
const CreateEvent = () => {
|
||||
const CreateEventRequest = () => {
|
||||
const navigate = useNavigate();
|
||||
const [resources, setResources] = useState([]);
|
||||
const [customers, setCustomers] = useState([]);
|
||||
@ -267,7 +267,7 @@ const CreateEvent = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table className="personnel-info-table mb-4 medical">
|
||||
<table className="personnel-info-table mb-4">
|
||||
<thead>
|
||||
<tr className="sortable-header">
|
||||
<th>Name</th>
|
||||
@ -300,4 +300,4 @@ const CreateEvent = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateEvent;
|
||||
export default CreateEventRequest;
|
||||
@ -153,91 +153,106 @@ const CreateEvent = () => {
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="eventClientInfo" id="event-tab">
|
||||
<Tab eventKey="eventClientInfo" title="Appointment Client And Time Information">
|
||||
<h6 className="text-primary">Client And Start Time</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Client
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '350px',
|
||||
height: '45px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Start Time
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
currentCustomer && <>
|
||||
<h6 className="text-primary">Client Information</h6>
|
||||
<Tab eventKey="eventClientInfo" title="Appointment Client And Time Information">
|
||||
<div className="multi-columns-container">
|
||||
<div className="column-container">
|
||||
<div className="column-card">
|
||||
<h6 className="text-primary">Client And Start Time</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Client Name</div>
|
||||
<div className="field-value">{currentCustomer?.name || ''}</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Client
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '350px',
|
||||
height: '45px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Preferred Name</div>
|
||||
<div className="field-value">{currentCustomer?.name_cn || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Pharmacy</div>
|
||||
<div className="field-value">{currentCustomer?.pharmacy || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Care Provider</div>
|
||||
<div className="field-value">{currentCustomer?.care_provider || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Birthday</div>
|
||||
<div className="field-value">{currentCustomer?.birth_date || ''}</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Start Time
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Next </button>
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Save </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column-container">
|
||||
<div className="column-card">
|
||||
{
|
||||
currentCustomer && <>
|
||||
<h6 className="text-primary">Client Information</h6>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Client Name</div>
|
||||
<div className="field-value">{currentCustomer?.name || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Preferred Name</div>
|
||||
<div className="field-value">{currentCustomer?.name_cn || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Pharmacy</div>
|
||||
<div className="field-value">{currentCustomer?.pharmacy || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Care Provider</div>
|
||||
<div className="field-value">{currentCustomer?.care_provider || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Birthday</div>
|
||||
<div className="field-value">{currentCustomer?.birth_date || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Note</div>
|
||||
<div className="field-value">{currentCustomer?.note || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
@ -489,7 +489,7 @@ const EventsMultipleList = () => {
|
||||
{table('active')}
|
||||
</Tab>
|
||||
<Tab eventKey="archivedEvents" title="Archived Appointments">
|
||||
<div className="app-main-content-fields-section-flex-end with-function flex-end">
|
||||
<div className="app-main-content-fields-section with-function flex-end">
|
||||
<div className="me-4">
|
||||
<div className="field-label">From</div>
|
||||
<DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
|
||||
|
||||
@ -6,6 +6,7 @@ import { AuthService, CustomerService, EventsService, ResourceService } from "..
|
||||
import Select from 'react-select';
|
||||
import { Button, Modal } from "react-bootstrap";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
||||
|
||||
const UpdateEvent = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -70,9 +71,6 @@ const UpdateEvent = () => {
|
||||
}
|
||||
|
||||
const saveEvent = () => {
|
||||
console.log('customer', currentCustomer);
|
||||
console.log('resource', currentResource);
|
||||
|
||||
let newEventDataClientAndResource = {};
|
||||
let newEventClientAndResource = {};
|
||||
if (currentCustomer) {
|
||||
@ -142,8 +140,6 @@ const UpdateEvent = () => {
|
||||
edit_history: currentEvent?.edit_history? [...currentEvent.edit_history, { employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }] : [{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }],
|
||||
...newEventClientAndResource
|
||||
}
|
||||
|
||||
console.log('new Event', newEvent);
|
||||
if (params.get('event')) {
|
||||
if (currentCustomer && currentResource)
|
||||
EventsService.createNewEvent(newEvent).then(data => redirectTo());
|
||||
@ -192,7 +188,6 @@ const UpdateEvent = () => {
|
||||
setTimeData(timeDatas.data);
|
||||
if (!currentEvent) {
|
||||
if (params.get('event')) {
|
||||
console.log('event', JSON.parse(params.get('event')));
|
||||
setCurrentEvent(JSON.parse(params.get('event')));
|
||||
} else {
|
||||
EventsService.getEvent(urlParams.id).then(eventData => {
|
||||
@ -269,20 +264,315 @@ const UpdateEvent = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="list row">
|
||||
<div className="col-md-8 col-xs-12">
|
||||
<div className="list row mb-4">
|
||||
<div className="col-md-12 text-primary">
|
||||
<h5>{ params.get('event') ? 'Create Medical Event from Request' : 'Update Medical Event'} <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5>
|
||||
<div className="list row mb-4">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Medical Appointment Information
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
{ params.get('event') ? 'Create Medical Event from Request' : 'Update Medical Event'}
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h4>{ params.get('event') ? 'Create Medical Event from Request' : 'Update Medical Event'} <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="eventInfo" id="event-tab">
|
||||
{ !hideCreateFields && <Tab eventKey="eventClientInfo" title="Appointment Client And Time Information">
|
||||
<div className="multi-columns-container">
|
||||
<div className="column-container">
|
||||
<div className="column-card">
|
||||
<h6 className="text-primary">Client And Start Time</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Client
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '350px',
|
||||
height: '45px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Start Time
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Save </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column-container">
|
||||
<div className="column-card">
|
||||
{
|
||||
currentCustomer && <>
|
||||
<h6 className="text-primary">Client Information</h6>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Client Name</div>
|
||||
<div className="field-value">{currentCustomer?.name || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Preferred Name</div>
|
||||
<div className="field-value">{currentCustomer?.name_cn || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Pharmacy</div>
|
||||
<div className="field-value">{currentCustomer?.pharmacy || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Care Provider</div>
|
||||
<div className="field-value">{currentCustomer?.care_provider || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Birthday</div>
|
||||
<div className="field-value">{currentCustomer?.birth_date || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Note</div>
|
||||
<div className="field-value">{currentCustomer?.note || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>}
|
||||
<Tab eventKey="eventInfo" title="Medical Appointment Information">
|
||||
<div className="multi-columns-container">
|
||||
<div className="column-container">
|
||||
<div className="column-card">
|
||||
<h6 className="text-primary">Appointment Details</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Resource
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
{currentResource ?
|
||||
(<><span>{currentResource?.name}</span> <span><button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Update</button></span></>) :
|
||||
(currentEvent?.data?.resource_name ? <><span>{currentEvent?.data?.resource_name}</span> <span><button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Update</button></span></> : <button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Please click here to add resources</button>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Title
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<input type="text" value={title || ''} onChange={e => setTitle(e.target.value)}/>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Tag
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<select value={color} onChange={e => setColor(e.target.value)}>
|
||||
<option value=""></option>
|
||||
{
|
||||
EventsService.colorOptions?.map((item) => <option value={item?.value}>{item?.label}</option>)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<h6 className="text-primary">Customer Information</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">New Patient
|
||||
</div>
|
||||
<select value={newPatient} onChange={e => setNewPatient(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Doctor's Order
|
||||
</div>
|
||||
<select value={docOrder} onChange={e => setDocOrder(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Fasting Required
|
||||
</div>
|
||||
<select value={fasting} onChange={e => setFasting(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="empty_stomach">Empty Stomach</option>
|
||||
<option value="clear_liquid">Clear Liquid</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Need Id
|
||||
</div>
|
||||
<select value={needId} onChange={e => setNeedId(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Need Medication List
|
||||
</div>
|
||||
<select value={needMedicationList} onChange={e => setNeedMedicationList(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<h6 className="text-primary">Assistance</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Language Support
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<select value={interpreter} onChange={e => setInterpreter(e.target.value)}>
|
||||
<option value=""></option>
|
||||
{
|
||||
EventsService.interpreterLevelOptions?.map((item) => <option value={item?.value}>{item?.label}</option>)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Transportation Needed
|
||||
</div>
|
||||
<select value={transMethod} onChange={e => setTransMethod(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="by own">By Own</option>
|
||||
<option value="televisit">Televisit</option>
|
||||
<option value="pickup only">Pickup Only</option>
|
||||
<option value="dropoff only">Dropoff Only</option>
|
||||
<option value="client does not need to go">Client Does Not Need To Go</option>
|
||||
<option value="Center Transportation">By Center Transportation</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<h6 className="text-primary">Additional Information</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Notes
|
||||
</div>
|
||||
<textarea value={notes || ''} onChange={e => setNotes(e.target.value)}/>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Reason
|
||||
</div>
|
||||
<textarea value={reason || ''} onChange={e => setReason(e.target.value)}/>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Other Requirements
|
||||
</div>
|
||||
<textarea value={otherRequirement || ''} onChange={e => setOtherRequirement(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Save </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column-container">
|
||||
{currentResource && <div className="column-card">
|
||||
<h6 className="text-primary">Provider Info</h6>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Name</div>
|
||||
<div className="field-value">{currentResource?.name || currentEvent?.data?.resource_name || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Specialty</div>
|
||||
<div className="field-value">{currentResource?.specialty || ''}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Phone</div>
|
||||
<div className="field-value">{currentResource?.phone || currentEvent?.data?.resource_phone || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Contact</div>
|
||||
<div className="field-value">{currentResource?.contact || currentEvent?.data?.resource_contact || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section short">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Address</div>
|
||||
<div className="field-value">{currentResource?.address || currentEvent?.data?.resource_address || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Select the Resource</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="mb-4 me-4">
|
||||
<div className="field-label">Type in Keyword to Filter</div>
|
||||
<input type="text" value={keyword} onChange={e => setKeyword(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-4">
|
||||
<div className="col-md-6 mb-4">
|
||||
<div>Resource:</div>
|
||||
{currentResource ?
|
||||
(<><span>{currentResource?.name}</span> <span><button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Update</button></span></>) :
|
||||
(currentEvent?.data?.resource_name ? <><span>{currentEvent?.data?.resource_name}</span> <span><button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Update</button></span></> : <button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Please click here to add resources</button>)}
|
||||
{/* <div>You can select a Resource type to filter the resources you can select from:</div>
|
||||
<div className="mb-4 me-4">
|
||||
<div className="field-label">Filter By Resource Type</div>
|
||||
<select value={resourceType} onChange={e => setResourceType(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="doctor">Doctor</option>
|
||||
@ -291,210 +581,10 @@ const UpdateEvent = () => {
|
||||
<option value="surgical center">Surgical Center</option>
|
||||
<option value="government agency">Government Agency</option>
|
||||
<option value="other">Other</option>
|
||||
</select> */}
|
||||
</div>
|
||||
{/* <div className="col-md-6 mb-4">
|
||||
<div>Resource:</div>
|
||||
<Select value={medicalResource || ''} onChange={selectedResource => onResourceChange(selectedResource)} options={[{value: '', label: ''}, ...filteredResources.map(resource => ({
|
||||
value: resource.id || '',
|
||||
label: resource?.name || ''
|
||||
}))]}></Select>
|
||||
</div> */}
|
||||
{!hideCreateFields && <div className="col-md-6 mb-4">
|
||||
<div>Client:</div>
|
||||
|
||||
<Select value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>}
|
||||
<div className="col-md-6 mb-4">
|
||||
<div>Title:</div> <input type="text" value={title || ''} onChange={e => setTitle(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-4">
|
||||
<div>Start Time:</div> <DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
{/* <div>Start Time</div> <DateTimePicker format={'MM/dd/y H:m'} disableClock={true} value={startTime} onChange={setStartTime} /> */}
|
||||
</div>
|
||||
<div className="col-md-12"></div>
|
||||
{/* <div className="col-md-12 mb-4">
|
||||
<div>Description:</div> <textarea value={description || ''} onChange={e => setDescription(e.target.value)}/>
|
||||
</div> */}
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Color:</div>
|
||||
<select value={color} onChange={e => setColor(e.target.value)}>
|
||||
<option value=""></option>
|
||||
{
|
||||
EventsService.colorOptions?.map((item) => <option value={item?.value}>{item?.label}</option>)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>New Patient:</div>
|
||||
<select value={newPatient} onChange={e => setNewPatient(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Confirmed:</div>
|
||||
<select value={confirmed} onChange={e => setConfirmed(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Fasting:</div>
|
||||
<select value={fasting} onChange={e => setFasting(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="empty_stomach">Empty Stomach</option>
|
||||
<option value="clear_liquid">Clear Liquid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Interpreter Level:</div>
|
||||
<select value={interpreter} onChange={e => setInterpreter(e.target.value)}>
|
||||
<option value=""></option>
|
||||
{
|
||||
EventsService.interpreterLevelOptions?.map((item) => <option value={item?.value}>{item?.label}</option>)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Doctor Order:</div>
|
||||
<select value={docOrder} onChange={e => setDocOrder(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Disability: </div>
|
||||
<select value={disability} onChange={e => setDisability(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Need Id: </div>
|
||||
<select value={needId} onChange={e => setNeedId(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Need Medication List</div>
|
||||
<select value={needMedicationList} onChange={e => setNeedMedicationList(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Disability Support:</div>
|
||||
<select value={disabilitySupport} onChange={e => setDisabilitySupport(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="center worker">center worker</option>
|
||||
<option value="family member">family member</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Transportation:</div>
|
||||
<select value={transMethod} onChange={e => setTransMethod(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="by own">By Own</option>
|
||||
<option value="televisit">Televisit</option>
|
||||
<option value="pickup only">Pickup Only</option>
|
||||
<option value="dropoff only">Dropoff Only</option>
|
||||
<option value="client does not need to go">Client Does Not Need To Go</option>
|
||||
<option value="Center Transportation">By Center Transportation</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Notes:</div><textarea value={notes || ''} onChange={e => setNotes(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Reason:</div>
|
||||
<textarea value={reason || ''} onChange={e => setReason(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Other Requirements:</div>
|
||||
<textarea value={otherRequirement || ''} onChange={e => setOtherRequirement(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-6 col-sm-6 col-xs-12">
|
||||
<button className="btn btn-primary btn-sm me-2 mb-2" onClick={() => saveEvent()}> Save </button>
|
||||
<button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4 col-xs-12">
|
||||
<fieldset>
|
||||
<legend>Resource Info</legend>
|
||||
<p>{currentResource?.name || currentEvent?.data?.resource_name || ''}</p>
|
||||
{currentResource?.specialty && (<p>{currentResource?.specialty || ''}</p>)}
|
||||
<p>{currentResource?.phone || currentEvent?.data?.resource_phone || ''}</p>
|
||||
<p>{currentResource?.contact || currentEvent?.data?.resource_contact || ''}</p>
|
||||
<p>{currentResource?.address || currentEvent?.data?.resource_address || ''}</p>
|
||||
</fieldset>
|
||||
|
||||
<p></p>
|
||||
|
||||
<fieldset>
|
||||
<legend>Client Info</legend>
|
||||
<p>{currentCustomer?.name || currentEvent?.data?.client_name || ''}</p>
|
||||
{currentCustomer?.name_cn && (<p>{currentCustomer?.name_cn || ''}</p>)}
|
||||
<p>{currentCustomer?.pharmacy || currentEvent?.data?.client_pharmacy || ''}</p>
|
||||
<p>{currentCustomer?.care_provider || currentEvent?.data?.client_pcp || ''}</p>
|
||||
<p>{currentCustomer?.birth_date || currentEvent?.data?.client_birth_date ||''}</p>
|
||||
</fieldset>
|
||||
|
||||
<p></p>
|
||||
|
||||
{/* {transportationInfo?.isFutureEvent && <fieldset>
|
||||
<legend>Transportation Info</legend>
|
||||
<p>translate1: {transportationInfo?.maxTranslate1 || 0}</p>
|
||||
<p>translate2: {transportationInfo?.maxTranslate1 || 0}</p>
|
||||
<p>max resource: {transportationInfo?.maxResource || 0}</p>
|
||||
<p></p>
|
||||
|
||||
<h4 style={{'color': 'red'}}>Remain:</h4>
|
||||
<p>(when edit, the numbers below are for reference only)</p>
|
||||
<p>translate1: { transportationInfo?.maxTranslate1 - transportationInfo?.totalTranslate1 - (currentEvent?.data?.interpreter === '1(译)' ? 0 : (interpreter==='1(译)' ? 1 : 0)) }</p>
|
||||
<p>translate2: { transportationInfo?.maxTranslate2 - transportationInfo?.totalTranslate2 - (currentEvent?.data?.interpreter === '2(译)' ? 0 : (interpreter==='2(译)' ? 1 : 0)) }</p>
|
||||
<p>resources: {transportationInfo?.maxResource - transportationInfo?.totalResource || 0 }</p>
|
||||
</fieldset> } */}
|
||||
</div>
|
||||
</div>
|
||||
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Select the Resource</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<div className="mb-4">Type in Keyword to Filter: <input type="text" value={keyword} onChange={e => setKeyword(e.target.value)}/></div>
|
||||
<div className="mb-4">Filter By Resource Type:
|
||||
<select value={resourceType} onChange={e => setResourceType(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="doctor">Doctor</option>
|
||||
<option value="pharmacy">Pharmacy</option>
|
||||
<option value="hospital">Hospital</option>
|
||||
<option value="surgical center">Surgical Center</option>
|
||||
<option value="government agency">Government Agency</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table className="personnel-info-table mb-4 medical">
|
||||
<table className="personnel-info-table mb-4">
|
||||
<thead>
|
||||
<tr className="sortable-header">
|
||||
<th>Name</th>
|
||||
|
||||
@ -115,14 +115,14 @@ const SideMenu = () => {
|
||||
},
|
||||
{
|
||||
name: 'Transportation Schedule',
|
||||
link: '/trans-routes/schedule',
|
||||
link: '/trans-routes/dashboard',
|
||||
category: '/trans-routes',
|
||||
roleFunc: AuthService.canAddOrEditRoutes
|
||||
roleFunc: AuthService.canViewRoutes
|
||||
},
|
||||
{
|
||||
name: 'Schedule Driver for Appointment',
|
||||
link: '#',
|
||||
roleFunc: AuthService.canAddOrEditRoutes
|
||||
roleFunc: AuthService.canViewRoutes
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -10,16 +10,22 @@ import 'react-time-picker/dist/TimePicker.css';
|
||||
import moment from 'moment';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allowForceEdit, showFilter, driverName, vehicle, relatedOutbound, vehicles, isInbound, deleteFile}) => {
|
||||
const PersonnelInfoTable = ({transRoutes, showCompletedInfo,
|
||||
showGroupInfo, allowForceEdit, showFilter,
|
||||
driverName, vehicle, relatedOutbound,
|
||||
vehicles, isInbound, deleteFile,
|
||||
keyword, statusFilter, customerNameFilter,
|
||||
customerTableId, routeTypeFilter, customerTypeFilter
|
||||
}) => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [showGroupEditor, setShowGroupEditor] = useState(false);
|
||||
const [customerInEdit, setCustomerInEdit] = useState(undefined);
|
||||
const [customersInEdit, setCustomersInEdit] = useState([]);
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [customerTypeFilter, setCustomerTypeFilter] = useState('');
|
||||
const [customerNameFilter, setCustomerNameFilter] = useState('');
|
||||
const [customerTableId, setCustomerTableId] = useState('');
|
||||
const [routeTypeFilter, setRouteTypeFilter] = useState('');
|
||||
// const [statusFilter, setStatusFilter] = useState('');
|
||||
// const [customerTypeFilter, setCustomerTypeFilter] = useState('');
|
||||
// const [customerNameFilter, setCustomerNameFilter] = useState('');
|
||||
// const [customerTableId, setCustomerTableId] = useState('');
|
||||
// const [routeTypeFilter, setRouteTypeFilter] = useState('');
|
||||
const [customerCheckInTime, setCustomerCheckInTime] = useState('');
|
||||
const [customerCheckOutTime, setCustomerCheckOutTime] = useState('');
|
||||
const [customerPickUpTime, setCustomerPickUpTime] = useState('');
|
||||
@ -37,13 +43,13 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
const { updateRoute } = transRoutesSlice.actions;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const scheduleDate = params.get('dateSchedule');
|
||||
const clearFilters = () => {
|
||||
setStatusFilter('');
|
||||
setCustomerTypeFilter('');
|
||||
setRouteTypeFilter('');
|
||||
setCustomerNameFilter('');
|
||||
setCustomerTableId('');
|
||||
}
|
||||
// const clearFilters = () => {
|
||||
// setStatusFilter('');
|
||||
// setCustomerTypeFilter('');
|
||||
// setRouteTypeFilter('');
|
||||
// setCustomerNameFilter('');
|
||||
// setCustomerTableId('');
|
||||
// }
|
||||
|
||||
const openForceEditModal = (customer) => {
|
||||
if (allowForceEdit) {
|
||||
@ -469,7 +475,7 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
<>
|
||||
{!showGroupInfo && (<div className="list row mb-4">
|
||||
<div className="col-md-12">
|
||||
<CSVLink className="btn btn-primary btn-sm" data={generateInboundSeniorsReportData()} filename={`Route Inbound Customers Show-up Report`}>
|
||||
<CSVLink className="btn btn-primary btn-sm btn-no-deco" data={generateInboundSeniorsReportData()} filename={`Route Inbound Customers Show-up Report`}>
|
||||
Generate Inbound Participants Report
|
||||
</CSVLink>
|
||||
</div>
|
||||
@ -485,7 +491,7 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
|
||||
</div>)}
|
||||
|
||||
{showFilter && (<div>
|
||||
{/* {showFilter && (<div>
|
||||
<h6>Filter:</h6>
|
||||
<div className="list row">
|
||||
<div className="col-md-6 col-sm-6 col-xs-12 mb-4">
|
||||
@ -532,13 +538,13 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
<button className="btn btn-primary" onClick={() => clearFilters()}>Clear Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>)} */}
|
||||
<div className="list row">
|
||||
<div className="col-md-12 overflow-auto">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th className="td-index">No.</th>
|
||||
<th>Name</th>
|
||||
{showCompletedInfo && (<th>Address</th>)}
|
||||
{showCompletedInfo && (<th>Tel</th>)}
|
||||
@ -594,10 +600,11 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
}
|
||||
return result1&&result2&&result3&&result4&&result5;
|
||||
})
|
||||
//.filter((item) => item?.customer_name?.includes(keyword) || getTextAndClassName(item)?.text?.includes(keyword) || item?.customer_type?.includes(keyword) || item?.table_id?.includes(keyword))
|
||||
.sort((a, b) => a.customer_name.replace(' ', '') > b.customer_name.replace(' ', '') ? 1: -1 )
|
||||
.map((customer, index) => {
|
||||
return (<tr key={index}>
|
||||
<td> {customer.index}</td>
|
||||
<td> {index}</td>
|
||||
<td>
|
||||
{ customer.customer_name}
|
||||
</td>
|
||||
@ -607,8 +614,8 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
|
||||
{showCompletedInfo && (<td>
|
||||
{ customer.customer_phone }
|
||||
</td>)}
|
||||
<td className={getTextAndClassName(customer).className}>
|
||||
{ getTextAndClassName(customer).text }
|
||||
<td>
|
||||
<div className={`${getTextAndClassName(customer).className} status-tag`}>{ getTextAndClassName(customer).text } </div>
|
||||
</td>
|
||||
<td>
|
||||
{ CUSTOMER_TYPE_TEXT[customer.customer_type]}
|
||||
|
||||
@ -1,13 +1,27 @@
|
||||
import React from "react";
|
||||
import PersonnelInfoTable from "./PersonnelInfoTable";
|
||||
|
||||
const PersonnelSection = ({transRoutes, sectionName, showCompletedInfo, showGroupInfo, allowForceEdit, showFilter, driverName, vehicle, relatedOutbound, vehicles, isInbound, deleteFile}) => {
|
||||
const PersonnelSection = ({transRoutes, sectionName, showCompletedInfo,
|
||||
showGroupInfo, allowForceEdit, showFilter,
|
||||
driverName, vehicle, relatedOutbound,
|
||||
vehicles, isInbound, deleteFile, keyword,
|
||||
statusFilter, customerTypeFilter, customerNameFilter, customerTableId, routeTypeFilter
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div className="text-primary mb-4"><h5>{sectionName}</h5></div>
|
||||
{/* <div className="text-primary mb-4"><h5>{sectionName}</h5></div> */}
|
||||
<div className="list row">
|
||||
<div className="col-md-12">
|
||||
<PersonnelInfoTable transRoutes={transRoutes} relatedOutbound={relatedOutbound} showCompletedInfo={showCompletedInfo} allowForceEdit={allowForceEdit} isInbound={isInbound} showFilter={showFilter} showGroupInfo={showGroupInfo} driverName={driverName} vehicle={vehicle} vehicles={vehicles} deleteFile={deleteFile}/>
|
||||
<PersonnelInfoTable transRoutes={transRoutes} relatedOutbound={relatedOutbound}
|
||||
showCompletedInfo={showCompletedInfo} allowForceEdit={allowForceEdit}
|
||||
isInbound={isInbound} showFilter={showFilter}
|
||||
showGroupInfo={showGroupInfo} driverName={driverName}
|
||||
vehicle={vehicle} vehicles={vehicles} deleteFile={deleteFile}
|
||||
statusFilter={statusFilter} customerTypeFilter={customerTypeFilter}
|
||||
customerNameFilter={customerNameFilter}
|
||||
customerTable={customerTableId}
|
||||
routeTypeFilter={routeTypeFilter}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import { useNavigate} from "react-router-dom";
|
||||
import { ROUTE_STATUS, PICKUP_STATUS } from "./../../shared";
|
||||
|
||||
const RouteCard = ({transRoute, drivers, vehicles, driver, vehicle}) => {
|
||||
const RouteCard = ({transRoute, drivers, vehicles, driver, vehicle, routeIndex}) => {
|
||||
const navigate = useNavigate();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const scheduleDate = params.get('dateSchedule');
|
||||
@ -78,9 +78,9 @@ const RouteCard = ({transRoute, drivers, vehicles, driver, vehicle}) => {
|
||||
<>
|
||||
{
|
||||
transRoute && (<div onClick={handleOnClick} className={`card-container ${routeStatus.className==='purple' ? routeStatus.className : ''}`}>
|
||||
<div className="">{transRoute.name}</div>
|
||||
<div>{`${transRoute?.route_customer_list?.length} Participants`}</div>
|
||||
<div className="route-card-title">{`#${routeIndex+1} `}{transRoute.name}</div>
|
||||
<div>{drivers.find((driver) => driver.id === transRoute.driver)?.name}</div>
|
||||
<div>{`${transRoute?.route_customer_list?.length} Participants`}</div>
|
||||
<div>{vehicles.find((vehicle) => vehicle.id === transRoute.vehicle)?.tag}</div>
|
||||
<div className="list row">
|
||||
<div className="col-md-12 card-status">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -323,7 +323,7 @@ const RoutesSchedule = () => {
|
||||
<div>Are you sure you want to delete all the schedule?</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={() => closeDeleteModal()}>
|
||||
<Button variant="link" onClick={() => closeDeleteModal()}>
|
||||
No
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => cleanupSchedule()}>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, {useState} from "react";
|
||||
import React, {useState, useEffect} from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { transRoutesSlice } from "../../store";
|
||||
import RouteCard from "./RouteCard";
|
||||
import { Modal, Button } from "react-bootstrap";
|
||||
import { PERSONAL_ROUTE_STATUS, PICKUP_STATUS } from "../../shared";
|
||||
import { CUSTOMER_TYPE, PERSONAL_ROUTE_STATUS, PICKUP_STATUS } from "../../shared";
|
||||
import { AuthService } from "../../services";
|
||||
import moment from 'moment';
|
||||
|
||||
@ -12,11 +12,30 @@ const RoutesSection = ({transRoutes, copyList, sectionName, drivers, vehicles, c
|
||||
const [routesOptions, setRouteOptions] = useState([]);
|
||||
const [newRoute, setNewRoute] = useState(undefined);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [seniors, setSeniors] = useState([]);
|
||||
const dispatch = useDispatch();
|
||||
const { createRoute } = transRoutesSlice.actions;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const scheduleDate = params.get('dateSchedule');
|
||||
|
||||
useEffect(() => {
|
||||
const getSeniors = () => {
|
||||
const seniors = [];
|
||||
if (transRoutes) {
|
||||
for (const transRoute of transRoutes) {
|
||||
for (const customer of transRoute.route_customer_list) {
|
||||
if (!seniors.includes(customer.customer_id) && customer.customer_pickup_status !== PICKUP_STATUS.SCHEDULE_ABSENT && customer.customer_route_status !== PERSONAL_ROUTE_STATUS.DISABLED) {
|
||||
seniors.push(customer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setSeniors(seniors);
|
||||
}
|
||||
getSeniors();
|
||||
}, [transRoutes]);
|
||||
|
||||
const openCopyModal = () => {
|
||||
setRouteOptions(copyList);
|
||||
setShowCopyModal(true);
|
||||
@ -61,25 +80,19 @@ const RoutesSection = ({transRoutes, copyList, sectionName, drivers, vehicles, c
|
||||
}
|
||||
}
|
||||
|
||||
const getSeniorsNumber = () => {
|
||||
const seniors = [];
|
||||
for (const transRoute of transRoutes) {
|
||||
for (const customer of transRoute.route_customer_list) {
|
||||
if (!seniors.includes(customer.customer_id) && customer.customer_pickup_status !== PICKUP_STATUS.SCHEDULE_ABSENT && customer.customer_route_status !== PERSONAL_ROUTE_STATUS.DISABLED) {
|
||||
seniors.push(customer.customer_id);
|
||||
}
|
||||
}
|
||||
}
|
||||
return seniors.length;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`text-primary ${canAddNew? 'mb-2' : ''}`}>
|
||||
<small className="me-4">
|
||||
{sectionName} { (sectionName.includes('Inbound') || sectionName.includes('Outbound')) && (` (${getSeniorsNumber()} participants)`)}
|
||||
</small>
|
||||
<h6 className="me-4">
|
||||
{`${sectionName}: `} <span className="route-stats">{
|
||||
(sectionName.includes('Inbound') ||
|
||||
sectionName.includes('Outbound')) &&
|
||||
(`${seniors?.length} Scheduled ${seniors?.filter(
|
||||
item => ![PERSONAL_ROUTE_STATUS.UNEXPECTED_ABSENT, PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT].includes(item?.customer_route_status))?.length} ${ sectionName.includes('Inbound') ? 'Checked In': 'Checked Out'} (${seniors.filter(item => [CUSTOMER_TYPE.MEMBER, CUSTOMER_TYPE.SELF_PAY].includes(item.customer_type))?.length} Members ${seniors.filter(item=> [CUSTOMER_TYPE.VISITOR].includes(item?.customer_type))?.length} Visitors)`)}</span>
|
||||
</h6>
|
||||
{ canAddNew && (
|
||||
<small className="me-4" onClick={() => { if (routeType) {redirect(routeType)} else {redirect()}}}>
|
||||
<a>{addText}</a>
|
||||
@ -92,9 +105,9 @@ const RoutesSection = ({transRoutes, copyList, sectionName, drivers, vehicles, c
|
||||
</div>
|
||||
{
|
||||
transRoutes && (<>
|
||||
<div className="list row">
|
||||
<div className="all-routes-container">
|
||||
{
|
||||
transRoutes.map((r) => Object.assign({}, r, {vehicleNumber: vehicles?.find((v) => r.vehicle === v.id)?.vehicle_number || 0})).sort((a, b) => a?.vehicleNumber - b?.vehicleNumber).map((route) => <div key={route.id} className="col-md-3 col-sm-6 col-xs-12"><RouteCard transRoute={route} drivers={drivers} vehicles={vehicles}/></div>)
|
||||
transRoutes.map((r) => Object.assign({}, r, {vehicleNumber: vehicles?.find((v) => r.vehicle === v.id)?.vehicle_number || 0})).sort((a, b) => a?.vehicleNumber - b?.vehicleNumber).map((route, index) => <div key={route.id} className="route-card-container"><RouteCard routeIndex={index} transRoute={route} drivers={drivers} vehicles={vehicles}/></div>)
|
||||
}
|
||||
</div>
|
||||
</>)
|
||||
|
||||
@ -41,8 +41,8 @@ const TransRoutes = () => {
|
||||
return (
|
||||
<div className="list row">
|
||||
<div className="col-md-12">
|
||||
<div className="float-end noprint"><button className="btn btn-link btn-sm" onClick={() => backToAdmin() }>Back To Admin</button></div>
|
||||
<div className="float-end noprint"><button className="btn btn-link btn-sm" onClick={() => AuthService.logout()}>Log Out</button></div>
|
||||
{/* <div className="float-end noprint"><button className="btn btn-link btn-sm" onClick={() => backToAdmin() }>Back To Admin</button></div>
|
||||
<div className="float-end noprint"><button className="btn btn-link btn-sm" onClick={() => AuthService.logout()}>Log Out</button></div> */}
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import axios from "axios";
|
||||
export default axios.create({
|
||||
baseURL: (window.location.hostname.includes('worldshine.mayo.llc') || window.location.hostname.includes('site')) ? "https://worldshine.mayo.llc/api" : ((window.location.hostname.includes('worldshine3.mayo.llc') || window.location.hostname.includes('site3')) ? "https://worldshine3.mayo.llc/api" : "https://worldshine2.mayo.llc/api"),
|
||||
// baseURL: (window.location.hostname.includes('worldshine.mayo.llc') || window.location.hostname.includes('site')) ? "https://worldshine.mayo.llc/api" : ((window.location.hostname.includes('worldshine3.mayo.llc') || window.location.hostname.includes('site3')) ? "https://worldshine3.mayo.llc/api" : "https://worldshine3.mayo.llc/api"),
|
||||
// for Test site only:
|
||||
//baseURL: (window.location.hostname.includes('ws1') ||window.location.hostname.includes('localhost') || window.location.hostname.includes('site1')) ? "https://ws1.mayosolution.com/api" : ((window.location.hostname.includes('ws3') || window.location.hostname.includes('site3')) ? "https://ws3.mayosolution.com/api" : "https://ws2.mayosolution.com/api"),
|
||||
baseURL: (window.location.hostname.includes('ws1') ||window.location.hostname.includes('localhost') || window.location.hostname.includes('site1')) ? "https://ws1.mayosolution.com/api" : ((window.location.hostname.includes('ws3') || window.location.hostname.includes('site3')) ? "https://ws3.mayosolution.com/api" : "https://ws2.mayosolution.com/api"),
|
||||
// baseURL: "http://localhost:8080/api",
|
||||
headers: {
|
||||
"Content-type": "application/json"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user