yangli/worldshine-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Route Dashboard schedule and history

Browse Source
This commit is contained in:
Yang Li 2025-05-08 19:38:54 -04:00
parent f7c351b161
commit 2fc3adfaec
20 changed files with 1644 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/.DS_Store vendored
View File

Binary file not shown.

12
app/views/asset-manifest.json
View File

@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.184a423c.css", "main.css": "/static/css/main.bbcd4e86.css",
"main.js": "/static/js/main.6094576b.js", "main.js": "/static/js/main.8f60a967.js",
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js", "static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png", "static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
"index.html": "/index.html", "index.html": "/index.html",
"main.184a423c.css.map": "/static/css/main.184a423c.css.map", "main.bbcd4e86.css.map": "/static/css/main.bbcd4e86.css.map",
"main.6094576b.js.map": "/static/js/main.6094576b.js.map", "main.8f60a967.js.map": "/static/js/main.8f60a967.js.map",
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map" "787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.184a423c.css", "static/css/main.bbcd4e86.css",
"static/js/main.6094576b.js" "static/js/main.8f60a967.js"
] ]
} }

2
app/views/index.html
View File

@ -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
View File

Binary file not shown.

12
client/build/asset-manifest.json
View File

@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.184a423c.css", "main.css": "/static/css/main.bbcd4e86.css",
"main.js": "/static/js/main.6094576b.js", "main.js": "/static/js/main.8f60a967.js",
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js", "static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png", "static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
"index.html": "/index.html", "index.html": "/index.html",
"main.184a423c.css.map": "/static/css/main.184a423c.css.map", "main.bbcd4e86.css.map": "/static/css/main.bbcd4e86.css.map",
"main.6094576b.js.map": "/static/js/main.6094576b.js.map", "main.8f60a967.js.map": "/static/js/main.8f60a967.js.map",
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map" "787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.184a423c.css", "static/css/main.bbcd4e86.css",
"static/js/main.6094576b.js" "static/js/main.8f60a967.js"
] ]
} }

2
client/build/index.html
View File

@ -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>

114
client/src/App.css
View File

@ -7,6 +7,7 @@ body {
color: white; color: white;
height: 35px; height: 35px;
font-size: 13px; font-size: 13px;
white-space: nowrap;
} }
.text-primary { .text-primary {
@ -282,11 +283,14 @@ legend {
} */ } */
.card-container { .card-container {
border: 1px solid #ccc; border: none;
padding: 15px; padding: 16px;
margin-bottom: 15px; margin-bottom: 16px;
font-size: .8em; font-size: .8em;
color: #333;
cursor: pointer; cursor: pointer;
border-radius: 8px;
background: #eee;
} }
.card-status { .card-status {
@ -357,7 +361,7 @@ table tr th {
table tr td { table tr td {
border: 1px solid white; border: 1px solid white;
padding-left: 16px; padding: 8px 16px;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
min-width: 250px; min-width: 250px;
@ -446,6 +450,25 @@ table .group td {
line-height: 2; 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 { .app-main-content-fields-section .field-value {
font-size: 12px; font-size: 12px;
color: #555; color: #555;
@ -455,7 +478,16 @@ table .group td {
margin-right: 100px; 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; width: 120px !important;
} }
@ -464,6 +496,16 @@ table .group td {
height: 45px; 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] { .app-main-content-fields-section.with-function .react-datepicker-wrapper input[type=text] {
height: 35px; height: 35px;
width: 120px; width: 120px;
@ -594,6 +636,25 @@ input[type="checkbox"] {
cursor: pointer; 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 { .personnel-info-table .red {
background: #dc3545; background: #dc3545;
color: rgb(25, 23, 23); color: rgb(25, 23, 23);
@ -603,6 +664,12 @@ input[type="checkbox"] {
color: white; color: white;
} }
.personnel-info-table .status-tag {
padding: 4px 8px;
border-radius: 6px;
text-align: center;
}
.personnel-info-table .dark-red { .personnel-info-table .dark-red {
background: #7c0d0e; background: #7c0d0e;
color: #fff; color: #fff;
@ -657,6 +724,29 @@ input[type="checkbox"] {
color: #000; 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 { .medical ul li {
cursor: pointer; cursor: pointer;
list-style: none; 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) { @media only screen and (min-width: 2000px) {
/* .container { /* .container {
max-width: 1920px; max-width: 1920px;

6
client/src/components/event-request/CreateEventRequest.js
View File

@ -6,7 +6,7 @@ import { AuthService, CustomerService, EventRequestsService, EventsService, Reso
import Select from 'react-select'; import Select from 'react-select';
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap"; import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
const CreateEvent = () => { const CreateEventRequest = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [resources, setResources] = useState([]); const [resources, setResources] = useState([]);
const [customers, setCustomers] = useState([]); const [customers, setCustomers] = useState([]);
@ -267,7 +267,7 @@ const CreateEvent = () => {
</div> </div>
</div> </div>
<table className="personnel-info-table mb-4 medical"> <table className="personnel-info-table mb-4">
<thead> <thead>
<tr className="sortable-header"> <tr className="sortable-header">
<th>Name</th> <th>Name</th>
@ -300,4 +300,4 @@ const CreateEvent = () => {
); );
}; };
export default CreateEvent; export default CreateEventRequest;

27
client/src/components/events/CreateEvent.js
View File

@ -154,6 +154,9 @@ const CreateEvent = () => {
<div className="app-main-content-list-func-container"> <div className="app-main-content-list-func-container">
<Tabs defaultActiveKey="eventClientInfo" id="event-tab"> <Tabs defaultActiveKey="eventClientInfo" id="event-tab">
<Tab eventKey="eventClientInfo" title="Appointment Client And Time Information"> <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> <h6 className="text-primary">Client And Start Time</h6>
<div className="app-main-content-fields-section"> <div className="app-main-content-fields-section">
<div className="me-4"> <div className="me-4">
@ -206,10 +209,20 @@ const CreateEvent = () => {
></DatePicker> ></DatePicker>
</div> </div>
</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 && <> currentCustomer && <>
<h6 className="text-primary">Client Information</h6> <h6 className="text-primary">Client Information</h6>
<div className="app-main-content-fields-section"> <div className="app-main-content-fields-section short">
<div className="field-body"> <div className="field-body">
<div className="field-label">Client Name</div> <div className="field-label">Client Name</div>
<div className="field-value">{currentCustomer?.name || ''}</div> <div className="field-value">{currentCustomer?.name || ''}</div>
@ -222,6 +235,8 @@ const CreateEvent = () => {
<div className="field-label">Pharmacy</div> <div className="field-label">Pharmacy</div>
<div className="field-value">{currentCustomer?.pharmacy || ''}</div> <div className="field-value">{currentCustomer?.pharmacy || ''}</div>
</div> </div>
</div>
<div className="app-main-content-fields-section short">
<div className="field-body"> <div className="field-body">
<div className="field-label">Care Provider</div> <div className="field-label">Care Provider</div>
<div className="field-value">{currentCustomer?.care_provider || ''}</div> <div className="field-value">{currentCustomer?.care_provider || ''}</div>
@ -230,14 +245,14 @@ const CreateEvent = () => {
<div className="field-label">Birthday</div> <div className="field-label">Birthday</div>
<div className="field-value">{currentCustomer?.birth_date || ''}</div> <div className="field-value">{currentCustomer?.birth_date || ''}</div>
</div> </div>
<div className="field-body">
<div className="field-label">Note</div>
<div className="field-value">{currentCustomer?.note || ''}</div>
</div>
</div> </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> </div>
</div> </div>
</Tab> </Tab>

2
client/src/components/events/EventsMultipleList.js
View File

@ -489,7 +489,7 @@ const EventsMultipleList = () => {
{table('active')} {table('active')}
</Tab> </Tab>
<Tab eventKey="archivedEvents" title="Archived Appointments"> <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="me-4">
<div className="field-label">From</div> <div className="field-label">From</div>
<DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} /> <DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />

382
client/src/components/events/UpdateEvent.js
View File

@ -6,6 +6,7 @@ import { AuthService, CustomerService, EventsService, ResourceService } from "..
import Select from 'react-select'; import Select from 'react-select';
import { Button, Modal } from "react-bootstrap"; import { Button, Modal } from "react-bootstrap";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
const UpdateEvent = () => { const UpdateEvent = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -70,9 +71,6 @@ const UpdateEvent = () => {
} }
const saveEvent = () => { const saveEvent = () => {
console.log('customer', currentCustomer);
console.log('resource', currentResource);
let newEventDataClientAndResource = {}; let newEventDataClientAndResource = {};
let newEventClientAndResource = {}; let newEventClientAndResource = {};
if (currentCustomer) { 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() }], 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 ...newEventClientAndResource
} }
console.log('new Event', newEvent);
if (params.get('event')) { if (params.get('event')) {
if (currentCustomer && currentResource) if (currentCustomer && currentResource)
EventsService.createNewEvent(newEvent).then(data => redirectTo()); EventsService.createNewEvent(newEvent).then(data => redirectTo());
@ -192,7 +188,6 @@ const UpdateEvent = () => {
setTimeData(timeDatas.data); setTimeData(timeDatas.data);
if (!currentEvent) { if (!currentEvent) {
if (params.get('event')) { if (params.get('event')) {
console.log('event', JSON.parse(params.get('event')));
setCurrentEvent(JSON.parse(params.get('event'))); setCurrentEvent(JSON.parse(params.get('event')));
} else { } else {
EventsService.getEvent(urlParams.id).then(eventData => { EventsService.getEvent(urlParams.id).then(eventData => {
@ -269,64 +264,153 @@ const UpdateEvent = () => {
return ( return (
<> <>
<div className="list row">
<div className="col-md-8 col-xs-12">
<div className="list row mb-4"> <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"> <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> <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> </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>
<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>
{/* <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 => ({ <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 || '', value: customer?.id || '',
label: customer?.name || '' label: customer?.name || ''
}))]}></Select> }))]}></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>
<div className="col-md-6 mb-4"> <div className="me-4">
<div>Start Time:</div> <DatePicker <div className="field-label">Start Time
<span className="required">*</span>
</div>
<DatePicker
selected={startTime} selected={startTime}
onChange={setStartTime} onChange={setStartTime}
showTimeInput showTimeInput
timeInputLabel="Time:" timeInputLabel="Time:"
dateFormat="MM/dd/yyyy, HH:mm" dateFormat="MM/dd/yyyy, HH:mm"
></DatePicker> ></DatePicker>
{/* <div>Start Time</div> <DateTimePicker format={'MM/dd/y H:m'} disableClock={true} value={startTime} onChange={setStartTime} /> */}
</div> </div>
<div className="col-md-12"></div> </div>
{/* <div className="col-md-12 mb-4"> <div className="list row mb-5">
<div>Description:</div> <textarea value={description || ''} onChange={e => setDescription(e.target.value)}/> <div className="col-md-12 col-sm-12 col-xs-12">
</div> */} <button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
<div className="col-md-4 mb-4"> <button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Save </button>
<div>Color:</div> </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)}> <select value={color} onChange={e => setColor(e.target.value)}>
<option value=""></option> <option value=""></option>
{ {
@ -334,32 +418,63 @@ const UpdateEvent = () => {
} }
</select> </select>
</div> </div>
<div className="col-md-4 mb-4"> </div>
<div>New Patient:</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)}> <select value={newPatient} onChange={e => setNewPatient(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="yes">Yes</option> <option value="yes">Yes</option>
<option value="no">No</option> <option value="no">No</option>
</select> </select>
</div> </div>
{/* <div className="col-md-4 mb-4"> <div className="me-4">
<div>Confirmed:</div> <div className="field-label">Doctor's Order
<select value={confirmed} onChange={e => setConfirmed(e.target.value)}> </div>
<select value={docOrder} onChange={e => setDocOrder(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="yes">Yes</option> <option value="yes">Yes</option>
<option value="no">No</option> <option value="no">No</option>
</select> </select>
</div> */} </div>
<div className="col-md-4 mb-4"> <div className="me-4">
<div>Fasting:</div> <div className="field-label">Fasting Required
</div>
<select value={fasting} onChange={e => setFasting(e.target.value)}> <select value={fasting} onChange={e => setFasting(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="empty_stomach">Empty Stomach</option> <option value="empty_stomach">Empty Stomach</option>
<option value="clear_liquid">Clear Liquid</option> <option value="clear_liquid">Clear Liquid</option>
</select> </select>
</div> </div>
<div className="col-md-4 mb-4"> </div>
<div>Interpreter Level:</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)}> <select value={interpreter} onChange={e => setInterpreter(e.target.value)}>
<option value=""></option> <option value=""></option>
{ {
@ -367,48 +482,9 @@ const UpdateEvent = () => {
} }
</select> </select>
</div> </div>
<div className="col-md-4 mb-4"> <div className="me-4">
<div>Doctor Order:</div> <div className="field-label">Transportation Needed
<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>
{/* <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)}> <select value={transMethod} onChange={e => setTransMethod(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="by own">By Own</option> <option value="by own">By Own</option>
@ -419,61 +495,70 @@ const UpdateEvent = () => {
<option value="Center Transportation">By Center Transportation</option> <option value="Center Transportation">By Center Transportation</option>
</select> </select>
</div> </div>
<div className="col-md-4 mb-4">
<div>Notes:</div><textarea value={notes || ''} onChange={e => setNotes(e.target.value)}/>
</div> </div>
<div className="col-md-4 mb-4"> <h6 className="text-primary">Additional Information</h6>
<div>Reason:</div> <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)}/> <textarea value={reason || ''} onChange={e => setReason(e.target.value)}/>
</div> </div>
<div className="col-md-4 mb-4"> <div className="me-4">
<div>Other Requirements:</div> <div className="field-label">Other Requirements
</div>
<textarea value={otherRequirement || ''} onChange={e => setOtherRequirement(e.target.value)}/> <textarea value={otherRequirement || ''} onChange={e => setOtherRequirement(e.target.value)}/>
</div> </div>
</div> </div>
<div className="list row mb-5"> <div className="list row mb-5">
<div className="col-md-6 col-sm-6 col-xs-12"> <div className="col-md-12 col-sm-12 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 float-right" onClick={() => redirectTo()}> Cancel </button>
<button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button> <button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Save </button>
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-4 col-xs-12"> </div>
<fieldset> <div className="column-container">
<legend>Resource Info</legend> {currentResource && <div className="column-card">
<p>{currentResource?.name || currentEvent?.data?.resource_name || ''}</p> <h6 className="text-primary">Provider Info</h6>
{currentResource?.specialty && (<p>{currentResource?.specialty || ''}</p>)} <div className="app-main-content-fields-section short">
<p>{currentResource?.phone || currentEvent?.data?.resource_phone || ''}</p> <div className="field-body">
<p>{currentResource?.contact || currentEvent?.data?.resource_contact || ''}</p> <div className="field-label">Name</div>
<p>{currentResource?.address || currentEvent?.data?.resource_address || ''}</p> <div className="field-value">{currentResource?.name || currentEvent?.data?.resource_name || ''}</div>
</fieldset> </div>
<div className="field-body">
<div className="field-label">Specialty</div>
<div className="field-value">{currentResource?.specialty || ''}</div>
</div>
<p></p> </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>
<fieldset> </div>
<legend>Client Info</legend> </Tab>
<p>{currentCustomer?.name || currentEvent?.data?.client_name || ''}</p> </Tabs>
{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>
</div> </div>
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}> <Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
@ -481,8 +566,13 @@ const UpdateEvent = () => {
<Modal.Title>Select the Resource</Modal.Title> <Modal.Title>Select the Resource</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <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="app-main-content-fields-section">
<div className="mb-4">Filter By Resource Type: <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 className="mb-4 me-4">
<div className="field-label">Filter By Resource Type</div>
<select value={resourceType} onChange={e => setResourceType(e.target.value)}> <select value={resourceType} onChange={e => setResourceType(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="doctor">Doctor</option> <option value="doctor">Doctor</option>
@ -493,8 +583,8 @@ const UpdateEvent = () => {
<option value="other">Other</option> <option value="other">Other</option>
</select> </select>
</div> </div>
</div>
<table className="personnel-info-table mb-4 medical"> <table className="personnel-info-table mb-4">
<thead> <thead>
<tr className="sortable-header"> <tr className="sortable-header">
<th>Name</th> <th>Name</th>

6
client/src/components/home/menu.js
View File

@ -115,14 +115,14 @@ const SideMenu = () => {
}, },
{ {
name: 'Transportation Schedule', name: 'Transportation Schedule',
link: '/trans-routes/schedule', link: '/trans-routes/dashboard',
category: '/trans-routes', category: '/trans-routes',
roleFunc: AuthService.canAddOrEditRoutes roleFunc: AuthService.canViewRoutes
}, },
{ {
name: 'Schedule Driver for Appointment', name: 'Schedule Driver for Appointment',
link: '#', link: '#',
roleFunc: AuthService.canAddOrEditRoutes roleFunc: AuthService.canViewRoutes
} }
] ]
}, },

47
client/src/components/trans-routes/PersonnelInfoTable.js
View File

@ -10,16 +10,22 @@ import 'react-time-picker/dist/TimePicker.css';
import moment from 'moment'; import moment from 'moment';
import { useNavigate } from "react-router-dom"; 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 [show, setShow] = useState(false);
const [showGroupEditor, setShowGroupEditor] = useState(false); const [showGroupEditor, setShowGroupEditor] = useState(false);
const [customerInEdit, setCustomerInEdit] = useState(undefined); const [customerInEdit, setCustomerInEdit] = useState(undefined);
const [customersInEdit, setCustomersInEdit] = useState([]); const [customersInEdit, setCustomersInEdit] = useState([]);
const [statusFilter, setStatusFilter] = useState(''); // const [statusFilter, setStatusFilter] = useState('');
const [customerTypeFilter, setCustomerTypeFilter] = useState(''); // const [customerTypeFilter, setCustomerTypeFilter] = useState('');
const [customerNameFilter, setCustomerNameFilter] = useState(''); // const [customerNameFilter, setCustomerNameFilter] = useState('');
const [customerTableId, setCustomerTableId] = useState(''); // const [customerTableId, setCustomerTableId] = useState('');
const [routeTypeFilter, setRouteTypeFilter] = useState(''); // const [routeTypeFilter, setRouteTypeFilter] = useState('');
const [customerCheckInTime, setCustomerCheckInTime] = useState(''); const [customerCheckInTime, setCustomerCheckInTime] = useState('');
const [customerCheckOutTime, setCustomerCheckOutTime] = useState(''); const [customerCheckOutTime, setCustomerCheckOutTime] = useState('');
const [customerPickUpTime, setCustomerPickUpTime] = useState(''); const [customerPickUpTime, setCustomerPickUpTime] = useState('');
@ -37,13 +43,13 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
const { updateRoute } = transRoutesSlice.actions; const { updateRoute } = transRoutesSlice.actions;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const scheduleDate = params.get('dateSchedule'); const scheduleDate = params.get('dateSchedule');
const clearFilters = () => { // const clearFilters = () => {
setStatusFilter(''); // setStatusFilter('');
setCustomerTypeFilter(''); // setCustomerTypeFilter('');
setRouteTypeFilter(''); // setRouteTypeFilter('');
setCustomerNameFilter(''); // setCustomerNameFilter('');
setCustomerTableId(''); // setCustomerTableId('');
} // }
const openForceEditModal = (customer) => { const openForceEditModal = (customer) => {
if (allowForceEdit) { if (allowForceEdit) {
@ -469,7 +475,7 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
<> <>
{!showGroupInfo && (<div className="list row mb-4"> {!showGroupInfo && (<div className="list row mb-4">
<div className="col-md-12"> <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 Generate Inbound Participants Report
</CSVLink> </CSVLink>
</div> </div>
@ -485,7 +491,7 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
</div>)} </div>)}
{showFilter && (<div> {/* {showFilter && (<div>
<h6>Filter:</h6> <h6>Filter:</h6>
<div className="list row"> <div className="list row">
<div className="col-md-6 col-sm-6 col-xs-12 mb-4"> <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> <button className="btn btn-primary" onClick={() => clearFilters()}>Clear Filters</button>
</div> </div>
</div> </div>
</div>)} </div>)} */}
<div className="list row"> <div className="list row">
<div className="col-md-12 overflow-auto"> <div className="col-md-12 overflow-auto">
<table className="personnel-info-table"> <table className="personnel-info-table">
<thead> <thead>
<tr> <tr>
<th>No.</th> <th className="td-index">No.</th>
<th>Name</th> <th>Name</th>
{showCompletedInfo && (<th>Address</th>)} {showCompletedInfo && (<th>Address</th>)}
{showCompletedInfo && (<th>Tel</th>)} {showCompletedInfo && (<th>Tel</th>)}
@ -594,10 +600,11 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
} }
return result1&&result2&&result3&&result4&&result5; 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 ) .sort((a, b) => a.customer_name.replace(' ', '') > b.customer_name.replace(' ', '') ? 1: -1 )
.map((customer, index) => { .map((customer, index) => {
return (<tr key={index}> return (<tr key={index}>
<td> {customer.index}</td> <td> {index}</td>
<td> <td>
{ customer.customer_name} { customer.customer_name}
</td> </td>
@ -607,8 +614,8 @@ const PersonnelInfoTable = ({transRoutes, showCompletedInfo, showGroupInfo, allo
{showCompletedInfo && (<td> {showCompletedInfo && (<td>
{ customer.customer_phone } { customer.customer_phone }
</td>)} </td>)}
<td className={getTextAndClassName(customer).className}> <td>
{ getTextAndClassName(customer).text } <div className={`${getTextAndClassName(customer).className} status-tag`}>{ getTextAndClassName(customer).text } </div>
</td> </td>
<td> <td>
{ CUSTOMER_TYPE_TEXT[customer.customer_type]} { CUSTOMER_TYPE_TEXT[customer.customer_type]}

20
client/src/components/trans-routes/PersonnelSection.js
View File

@ -1,13 +1,27 @@
import React from "react"; import React from "react";
import PersonnelInfoTable from "./PersonnelInfoTable"; 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 ( 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="list row">
<div className="col-md-12"> <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>
</div> </div>
</> </>

6
client/src/components/trans-routes/RouteCard.js
View File

@ -2,7 +2,7 @@ import React from "react";
import { useNavigate} from "react-router-dom"; import { useNavigate} from "react-router-dom";
import { ROUTE_STATUS, PICKUP_STATUS } from "./../../shared"; 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 navigate = useNavigate();
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const scheduleDate = params.get('dateSchedule'); 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 : ''}`}> transRoute && (<div onClick={handleOnClick} className={`card-container ${routeStatus.className==='purple' ? routeStatus.className : ''}`}>
<div className="">{transRoute.name}</div> <div className="route-card-title">{`#${routeIndex+1} `}{transRoute.name}</div>
<div>{`${transRoute?.route_customer_list?.length} Participants`}</div>
<div>{drivers.find((driver) => driver.id === transRoute.driver)?.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>{vehicles.find((vehicle) => vehicle.id === transRoute.vehicle)?.tag}</div>
<div className="list row"> <div className="list row">
<div className="col-md-12 card-status"> <div className="col-md-12 card-status">

1071
client/src/components/trans-routes/RoutesDashboard.js
View File

File diff suppressed because it is too large Load Diff

2
client/src/components/trans-routes/RoutesSchedule.js
View File

@ -323,7 +323,7 @@ const RoutesSchedule = () => {
<div>Are you sure you want to delete all the schedule?</div> <div>Are you sure you want to delete all the schedule?</div>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button variant="secondary" onClick={() => closeDeleteModal()}> <Button variant="link" onClick={() => closeDeleteModal()}>
No No
</Button> </Button>
<Button variant="primary" onClick={() => cleanupSchedule()}> <Button variant="primary" onClick={() => cleanupSchedule()}>

49
client/src/components/trans-routes/RoutesSection.js
View File

@ -1,9 +1,9 @@
import React, {useState} from "react"; import React, {useState, useEffect} from "react";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { transRoutesSlice } from "../../store"; import { transRoutesSlice } from "../../store";
import RouteCard from "./RouteCard"; import RouteCard from "./RouteCard";
import { Modal, Button } from "react-bootstrap"; 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 { AuthService } from "../../services";
import moment from 'moment'; import moment from 'moment';
@ -12,11 +12,30 @@ const RoutesSection = ({transRoutes, copyList, sectionName, drivers, vehicles, c
const [routesOptions, setRouteOptions] = useState([]); const [routesOptions, setRouteOptions] = useState([]);
const [newRoute, setNewRoute] = useState(undefined); const [newRoute, setNewRoute] = useState(undefined);
const [newName, setNewName] = useState(''); const [newName, setNewName] = useState('');
const [seniors, setSeniors] = useState([]);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { createRoute } = transRoutesSlice.actions; const { createRoute } = transRoutesSlice.actions;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const scheduleDate = params.get('dateSchedule'); 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 = () => { const openCopyModal = () => {
setRouteOptions(copyList); setRouteOptions(copyList);
setShowCopyModal(true); 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 ( return (
<> <>
<div className={`text-primary ${canAddNew? 'mb-2' : ''}`}> <div className={`text-primary ${canAddNew? 'mb-2' : ''}`}>
<small className="me-4"> <h6 className="me-4">
{sectionName} { (sectionName.includes('Inbound') || sectionName.includes('Outbound')) && (` (${getSeniorsNumber()} participants)`)} {`${sectionName}: `} <span className="route-stats">{
</small> (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 && ( { canAddNew && (
<small className="me-4" onClick={() => { if (routeType) {redirect(routeType)} else {redirect()}}}> <small className="me-4" onClick={() => { if (routeType) {redirect(routeType)} else {redirect()}}}>
<a>{addText}</a> <a>{addText}</a>
@ -92,9 +105,9 @@ const RoutesSection = ({transRoutes, copyList, sectionName, drivers, vehicles, c
</div> </div>
{ {
transRoutes && (<> 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> </div>
</>) </>)

4
client/src/components/trans-routes/TransRoutes.js
View File

@ -41,8 +41,8 @@ const TransRoutes = () => {
return ( return (
<div className="list row"> <div className="list row">
<div className="col-md-12"> <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={() => 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={() => AuthService.logout()}>Log Out</button></div> */}
<Outlet /> <Outlet />
</div> </div>
</div> </div>

4
client/src/http-common.js
View File

@ -1,8 +1,8 @@
import axios from "axios"; import axios from "axios";
export default axios.create({ 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: // 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", // baseURL: "http://localhost:8080/api",
headers: { headers: {
"Content-type": "application/json" "Content-type": "application/json"