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

Add Event module

Browse Source
This commit is contained in:
Yang Li 2025-05-04 16:27:24 -04:00
parent 176af8407b
commit f7c351b161
11 changed files with 815 additions and 727 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.38d76725.css", "main.css": "/static/css/main.184a423c.css",
"main.js": "/static/js/main.6292bf56.js", "main.js": "/static/js/main.6094576b.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.38d76725.css.map": "/static/css/main.38d76725.css.map", "main.184a423c.css.map": "/static/css/main.184a423c.css.map",
"main.6292bf56.js.map": "/static/js/main.6292bf56.js.map", "main.6094576b.js.map": "/static/js/main.6094576b.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.38d76725.css", "static/css/main.184a423c.css",
"static/js/main.6292bf56.js" "static/js/main.6094576b.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.6292bf56.js"></script><link href="/static/css/main.38d76725.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.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>

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

@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.38d76725.css", "main.css": "/static/css/main.184a423c.css",
"main.js": "/static/js/main.6292bf56.js", "main.js": "/static/js/main.6094576b.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.38d76725.css.map": "/static/css/main.38d76725.css.map", "main.184a423c.css.map": "/static/css/main.184a423c.css.map",
"main.6292bf56.js.map": "/static/js/main.6292bf56.js.map", "main.6094576b.js.map": "/static/js/main.6094576b.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.38d76725.css", "static/css/main.184a423c.css",
"static/js/main.6292bf56.js" "static/js/main.6094576b.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.6292bf56.js"></script><link href="/static/css/main.38d76725.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.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>

33
client/src/App.css
View File

@ -228,6 +228,7 @@ input {
position: absolute; position: absolute;
right: 0; right: 0;
top: 4px; top: 4px;
display: flex;
} }
@ -394,6 +395,12 @@ table .group td {
font-style: italic; font-style: italic;
} }
.list-func-panel .dropdown-menu {
padding: 20px;
width: 250px;
transform: translate(0px, 37px)!important;
}
.app-main-content-fields-section { .app-main-content-fields-section {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
@ -401,10 +408,27 @@ table .group td {
margin-bottom: 40px; margin-bottom: 40px;
} }
.app-main-content-fields-section.flex-end {
display: flex;
align-items: flex-end;
margin-top: 24px;
margin-bottom: 40px;
}
.app-main-content-fields-section.column { .app-main-content-fields-section.column {
flex-direction: column; flex-direction: column;
} }
.no-margin-v {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.margin-sm {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.app-main-content-fields-section li { .app-main-content-fields-section li {
list-style: decimal; list-style: decimal;
margin-top: 4px; margin-top: 4px;
@ -431,11 +455,20 @@ table .group td {
margin-right: 100px; margin-right: 100px;
} }
.app-main-content-fields-section .react-datepicker-wrapper {
width: 120px !important;
}
.app-main-content-fields-section input[type=text] { .app-main-content-fields-section input[type=text] {
width: 350px; width: 350px;
height: 45px; height: 45px;
} }
.app-main-content-fields-section.with-function .react-datepicker-wrapper input[type=text] {
height: 35px;
width: 120px;
}
.app-main-content-fields-section input[type=text].shorter { .app-main-content-fields-section input[type=text].shorter {
width: 50px; width: 50px;
height: 45px; height: 45px;

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

@ -4,7 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
// import { customerSlice } from "./../../store"; // import { customerSlice } from "./../../store";
import { AuthService, CustomerService, EventRequestsService, EventsService, ResourceService } from "../../services"; import { AuthService, CustomerService, EventRequestsService, EventsService, ResourceService } from "../../services";
import Select from 'react-select'; import Select from 'react-select';
import { Button, Modal } from "react-bootstrap"; import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
const CreateEvent = () => { const CreateEvent = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -110,23 +110,85 @@ const CreateEvent = () => {
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>
Appointment Request Information
</Breadcrumb.Item>
<Breadcrumb.Item active>
Create New Appointment Request
</Breadcrumb.Item>
</Breadcrumb>
<div className="col-md-12 text-primary"> <div className="col-md-12 text-primary">
<h5>Create Event Request<button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5> <h4>Create New Appointment Request <button className="btn btn-link btn-sm" onClick={() => {goToRequestList()}}>Back</button></h4>
</div> </div>
</div> </div>
<div className="list row mb-4"> <div className="app-main-content-list-container">
<div className="col-md-6 mb-4"> <div className="app-main-content-list-func-container">
<div>Source*:</div> <Tabs defaultActiveKey="requestInfo" id="request-tab">
<Tab eventKey="requestInfo" title="Appointment Request Information">
<h6 className="text-primary">Patient And Doctor Info</h6>
<div className="app-main-content-fields-section">
<div className="me-4">
<div className="field-label">Patient
<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={customerDisplay || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
value: customer?.id || '',
label: `${customer?.name} - ${customer?.name_cn} - ${customer?.birth_date}` || ''
}))]}></Select>
</div>
<div className="me-4">
<div className="field-label">Doctor
<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></>) : (<button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Please click here to add resources</button>)}
</div>
</div>
<h6 className="text-primary">Appointment Request Information</h6>
<div className="app-main-content-fields-section">
<div className="me-4">
<div className="field-label">Source
<span className="required">*</span>
</div>
<select value={source} onChange={e => setSource(e.target.value)}> <select value={source} onChange={e => setSource(e.target.value)}>
<option value=""></option> <option value=""></option>
{EventRequestsService.sourceList.map((item) => <option value={item.value}>{item.label}</option>)} {EventRequestsService.sourceList.map((item) => <option value={item.value}>{item.label}</option>)}
</select> </select>
</div> </div>
<div className="col-md-6 mb-4"> <div className="me-4">
<div>Type*:</div> <div className="field-label">Type
<span className="required">*</span>
</div>
<select value={type} onChange={e => setType(e.target.value)}> <select value={type} onChange={e => setType(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="New">New</option> <option value="New">New</option>
@ -137,27 +199,18 @@ const CreateEvent = () => {
<option value="Option 6">Option 6</option> <option value="Option 6">Option 6</option>
</select> </select>
</div> </div>
<div className="col-md-6 mb-4">
<div>Patient*:</div>
<Select value={customerDisplay || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
value: customer?.id || '',
label: `${customer?.name} - ${customer?.name_cn} - ${customer?.birth_date}` || ''
}))]}></Select>
</div> </div>
<div className="col-md-6 mb-4"> <div className="app-main-content-fields-section">
<div>Doctor:</div> <div className="me-4">
{currentResource ? (<><span>{currentResource?.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 className="field-label">Symptom 和特殊要求
{/* <Select value={medicalResource || ''} onChange={selectedResource => onResourceChange(selectedResource)} options={[{value: '', label: ''}, ...resources.map(resource => ({
value: resource.id || '',
label: resource?.name || ''
}))]}></Select> */}
</div> </div>
<div className="col-md-12 mb-4"> <textarea value={symptom || ''} onChange={e => setSymptom(e.target.value)}/>
<div>Symptom 和特殊要求:</div> <textarea value={symptom || ''} onChange={e => setSymptom(e.target.value)}/> </div>
</div>
<div className="app-main-content-fields-section">
<div className="me-4">
<div className="field-label">Transportation
</div> </div>
<div className="col-md-6 mb-4">
<div>Transportation:</div>
<select value={transportation} onChange={e => setTransportation(e.target.value)}> <select value={transportation} onChange={e => setTransportation(e.target.value)}>
<option value=""></option> <option value=""></option>
<option value="by own">By Own</option> <option value="by own">By Own</option>
@ -168,41 +221,25 @@ const CreateEvent = () => {
<option value="client does not need to go">Client Does Not Need To Go</option> <option value="client does not need to go">Client Does Not Need To Go</option>
</select> </select>
</div> </div>
<div className="col-md-6 mb-4"> <div className="me-4">
<div>NP:</div> <div className="field-label">NP
</div>
<select value={np} onChange={e => setNp(e.target.value)}> <select value={np} onChange={e => setNp(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-6 mb-4">
<div>Upload*:</div>
<select value={upload} onChange={e => setUpload(e.target.value)}>
<option value=""></option>
<option value="Jiying Zhu">Jiying Zhu</option>
<option value="Daiyuan Luo">Daiyuan Luo</option>
<option value="Shu Zhang">Shu Zhang</option>
<option value="Jing Lu">Jing Lu</option>
<option value="Li Sun">Li Sun</option>
<option value="Yu Wang">Yu Wang</option>
<option value="Xu,Weiqin">Xu,Weiqin</option>
<option value="Ma,Junpei">Ma,Junpei</option>
<option value="Joyce Zhang">Joyce Zhang</option>
<option value="Other">Other</option>
</select>
</div>
{upload === 'Other' && <div className="col-md-6 mb-4">
Upload By if Other:
<input type="text" value={uploadOther || ''} onChange={e => setUploadOther(e.target.value)}/>
</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={() => saveEventRequest()}> Submit </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={() => saveEventRequest()}> Submit </button>
</div> </div>
</div> </div>
</Tab>
</Tabs>
</div> </div>
</div> </div>
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}> <Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
@ -210,8 +247,14 @@ const CreateEvent = () => {
<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>
@ -222,6 +265,7 @@ const CreateEvent = () => {
<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 medical">
<thead> <thead>
@ -239,7 +283,7 @@ const CreateEvent = () => {
<td>{`${resource?.name || ''}${resource?.name ? '-': ''}${resource?.name_original || ''}${resource?.name_original ? '-': ''}${resource?.name_branch || ''}`}</td> <td>{`${resource?.name || ''}${resource?.name ? '-': ''}${resource?.name_original || ''}${resource?.name_original ? '-': ''}${resource?.name_branch || ''}`}</td>
<td>{resource?.specialty}</td> <td>{resource?.specialty}</td>
<td>{resource?.address}</td> <td>{resource?.address}</td>
<td style={{'min-width': '220px'}}>{ resource?.id === currentResource?.id ? 'Selected' : (<Button variant="primary" className="me-2" size="sm" onClick={() => {setCurrentResource(resource); setShowResourceModal(false)}}>Select</Button>)}</td> <td style={{'min-width': '220px'}}>{ resource?.id === currentResource?.id ? 'Selected' : (<Button variant="link" className="me-2" size="sm" onClick={() => {setCurrentResource(resource); setShowResourceModal(false)}}>Select</Button>)}</td>
</tr>) </tr>)
} }
</tbody> </tbody>
@ -251,6 +295,7 @@ const CreateEvent = () => {
</Button> </Button>
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>
</> </>
); );
}; };

138
client/src/components/event-request/EventRequestList.js
View File

@ -1,24 +1,20 @@
import React, {useState, useEffect} from "react"; import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, ResourceService, EventRequestsService } from "../../services"; import { AuthService, EventsService, CustomerService, ResourceService, EventRequestsService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
const EventRequestList = () => { const EventRequestList = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [eventRequests, setEventRequests] = useState([]); const [eventRequests, setEventRequests] = useState([]);
const [customers, setCustomers] = useState([]); const [customers, setCustomers] = useState([]);
const [resources, setResources] = useState([]); const [resources, setResources] = useState([]);
// const [selectedDate, setSelectedDate] = useState(new Date());
const [sorting, setSorting] = useState({key: '', order: ''}); const [sorting, setSorting] = useState({key: '', order: ''});
const [showDone, setShowDone] = useState(false); const [showDone, setShowDone] = useState(false);
const [comments, setComments] = useState({}); const [comments, setComments] = useState({});
// const [selectedItems, setSelectedItems] = useState([]); const [keyword, setKeyword] = useState('');
// const [showTransportationModal, setShowTransportationModal] = useState(false); const [selectedItems, setSelectedItems] = useState([]);
// const [driver, setDriver] = useState(null);
// const [driverOptions, setDriverOptions] = useState([]);
// const [transportStartTime, setTransportStartTime] = useState(null);
// const [transportOptionsList, setTransportationOptionsList] = useState([]);
// const [transportSelected, setTransportSelected] = useState(null);
// const [showDeletedItems, setShowDeletedItems] = useState(false);
const columns = [ const columns = [
{ {
key: 'customer_display', key: 'customer_display',
@ -83,14 +79,12 @@ const columns = [
useEffect(() => { useEffect(() => {
if (customers?.length > 0 && resources?.length>0) { if (customers?.length > 0 && resources?.length>0) {
EventRequestsService.getAllEventRequests({status: 'active'}).then((data) => { EventRequestsService.getAllEventRequests().then((data) => {
setEventRequests(data.data); setEventRequests(data.data);
}) })
} }
}, [resources, customers]); }, [resources, customers]);
useEffect(() => { useEffect(() => {
const newEventRequests = [...eventRequests]; const newEventRequests = [...eventRequests];
const sortedEventRequests = sorting.key === '' ? newEventRequests : newEventRequests.sort((a, b) => { const sortedEventRequests = sorting.key === '' ? newEventRequests : newEventRequests.sort((a, b) => {
@ -101,6 +95,12 @@ const columns = [
) )
}, [sorting]); }, [sorting]);
const filterRequestsFun = (item, statusParam, keywordParam) => {
return (item?.customer_display?.toLowerCase()?.includes(keywordParam?.toLowerCase()) || item?.source?.toLowerCase()?.includes(keywordParam?.toLowerCase()) ||
item?.resource_display?.toLowerCase()?.includes(keywordParam?.toLowerCase())) && item?.status === statusParam
}
const redirectToAdmin = () => { const redirectToAdmin = () => {
navigate(`/medical`) navigate(`/medical`)
@ -111,6 +111,37 @@ const columns = [
navigate(`/medical/event-request`) navigate(`/medical/event-request`)
} }
const toggleSelectedAllItems = () => {
if (selectedItems.length !== eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))?.length || selectedItems.length === 0) {
const newSelectedItems = [...eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))].map((customer) => customer.id);
setSelectedItems(newSelectedItems);
} else {
setSelectedItems([]);
}
}
const toggleItem = (id) => {
if (selectedItems.includes(id)) {
const newSelectedItems = [...selectedItems].filter((item) => item !== id);
setSelectedItems(newSelectedItems);
} else {
const newSelectedItems = [...selectedItems, id];
setSelectedItems(newSelectedItems);
}
}
const showDoneItems = (value) => {
setShowDone(value === 'completedRequests');
// Recover all filters
setKeyword('');
setSorting({key: '', order: ''});
setSelectedItems([]);
}
const checkSelectAll = () => {
return selectedItems.length === eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))?.length && selectedItems.length > 0;
}
const deleteItem = (id) => { const deleteItem = (id) => {
EventRequestsService.updateEventRequest(id, {status: 'inactive'}).then(() => { EventRequestsService.updateEventRequest(id, {status: 'inactive'}).then(() => {
EventRequestsService.getAllEventRequests().then((data) => { EventRequestsService.getAllEventRequests().then((data) => {
@ -119,18 +150,6 @@ const columns = [
}) })
} }
const goToNext = (id) => {
navigate(`/medical/events/edit/${id}`)
}
const filterRequests = (request) => {
if (showDone) {
return request.status === 'done' || request.status === 'active'
} else {
return request.status === 'active'
}
}
const confirmEventRequest = (eventRequest) => { const confirmEventRequest = (eventRequest) => {
EventRequestsService.updateEventRequest(eventRequest.id, {status: 'done', edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]}).then(() => { EventRequestsService.updateEventRequest(eventRequest.id, {status: 'done', edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]}).then(() => {
EventRequestsService.getAllEventRequests().then((data) => { EventRequestsService.getAllEventRequests().then((data) => {
@ -140,7 +159,6 @@ const columns = [
} }
const createNewEvent = (eventRequest) => { const createNewEvent = (eventRequest) => {
console.log('event', eventRequest);
const customer = customers.find(c => c.id === eventRequest?.customer_id); const customer = customers.find(c => c.id === eventRequest?.customer_id);
const resource = resources.find(r => r.id === eventRequest?.resource); const resource = resources.find(r => r.id === eventRequest?.resource);
const newEventData = { const newEventData = {
@ -169,12 +187,9 @@ const columns = [
const newEvent = { const newEvent = {
data: newEventData, data: newEventData,
// title: title,
// descrption: description,
notes: eventRequest?.symptom, notes: eventRequest?.symptom,
start_time: new Date(), start_time: new Date(),
type: 'medical', type: 'medical',
// stop_time: new Date(startTime),
source_type: resource?.type, source_type: resource?.type,
source_uuid: resource?.id, source_uuid: resource?.id,
source_name: resource?.name, source_name: resource?.name,
@ -190,9 +205,6 @@ const columns = [
console.log('new Event', newEvent); console.log('new Event', newEvent);
navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`) navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`)
// EventsService.createNewEvent(newEvent).then(data => {
// EventRequestsService.updateEventRequest(eventRequest.id, {status: 'done'}).then(() => goToNext(data.data?.id))
// });
} }
const setCommentsValue = (e) => { const setCommentsValue = (e) => {
@ -201,7 +213,6 @@ const columns = [
} }
const saveComments = (id) => { const saveComments = (id) => {
console.log('here it is', comments);
const currentComment = comments[id]; const currentComment = comments[id];
if (currentComment) { if (currentComment) {
const existingComments = eventRequests?.find((request) => request.id === id)?.notes || []; const existingComments = eventRequests?.find((request) => request.id === id)?.notes || [];
@ -239,26 +250,16 @@ const columns = [
const getStatusLabel = (status) => status === 'active' ? 'In Progress' : (status==='done' ? 'Done' : 'Deleted') const getStatusLabel = (status) => status === 'active' ? 'In Progress' : (status==='done' ? 'Done' : 'Deleted')
return ( const table = (statusParam, keywordParam) => <div className="list row mb-4">
<>
<div className="list row mb-4">
<div className="col-md-12 text-primary">
<h5>Medical Appointment Requests List <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Appointment Request</button> <button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button></h5>
</div>
</div>
<div className="list row mb-4">
<div className="col-md-12 col-sm-12 mb-4">
Show Completed Requests: <input type="checkbox" value={showDone} checked={showDone === true} onClick={() => setShowDone(!showDone)} />
</div>
<div className="col-md-12"> <div className="col-md-12">
<table className="personnel-info-table"> <table className="personnel-info-table">
<thead> <thead>
<tr> <tr>
<th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
<th className="th-index">No.</th>
{ {
columns.map((column, index) => <th className="sortable-header" key={index}> columns.map((column, index) => <th className="sortable-header" key={index}>
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span> {column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
</th>) </th>)
} }
<th>Completed By</th> <th>Completed By</th>
@ -270,7 +271,9 @@ const columns = [
</thead> </thead>
<tbody> <tbody>
{ {
eventRequests && (eventRequests.filter((request) => filterRequests(request) ).map(eventRequest => <tr key={eventRequest.id}> eventRequests.filter((item) => filterRequestsFun(item, statusParam, keywordParam) )?.map((eventRequest, index) => <tr key={eventRequest?.id}>
<td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(eventRequest?.id)} onClick={()=>toggleItem(eventRequest?.id)}/></td>
<td className="td-index">{index + 1}</td>
<td>{eventRequest?.customer_display}</td> <td>{eventRequest?.customer_display}</td>
<td>{eventRequest?.resource_display}</td> <td>{eventRequest?.resource_display}</td>
<td>{EventRequestsService.sourceList.find((item) => item?.value === eventRequest?.source)?.label || eventRequest?.source}</td> <td>{EventRequestsService.sourceList.find((item) => item?.value === eventRequest?.source)?.label || eventRequest?.source}</td>
@ -284,17 +287,54 @@ const columns = [
<td>{eventRequest?.notes?.map((note) => { <td>{eventRequest?.notes?.map((note) => {
return <p>{`${note?.author}: ${note?.content}`}</p> return <p>{`${note?.author}: ${note?.content}`}</p>
})}</td> })}</td>
<td align="center"><textarea id={eventRequest?.id} name={eventRequest?.id} onChange={setCommentsValue} className="comments-text"/> <button className="btn btn-primary btn-sm me-2" onClick={() => saveComments(eventRequest?.id)}>Submit</button></td> <td align="center"><textarea id={eventRequest?.id} name={eventRequest?.id} onChange={setCommentsValue} className="comments-text"/> <button className="btn btn-primary btn-sm me-2 mt-2" onClick={() => saveComments(eventRequest?.id)}>Submit</button></td>
<td className={eventRequest.status === 'active' ? 'table-button-container': ''}> <td className={eventRequest.status === 'active' ? 'table-button-container': ''}>
{eventRequest.status !== 'done' && <button className="btn btn-primary btn-sm me-2" onClick={() => createNewEvent(eventRequest)}> New Appointment </button>} {eventRequest.status !== 'done' && <button className="btn btn-primary btn-sm me-2" onClick={() => createNewEvent(eventRequest)}> New Appointment </button>}
{eventRequest.status !== 'done' && <button className="btn btn-secondary btn-sm me-2" onClick={() => confirmEventRequest(eventRequest)}> Completed</button>} {eventRequest.status !== 'done' && <button className="btn btn-secondary btn-sm me-2" onClick={() => confirmEventRequest(eventRequest)}> Completed</button>}
{/* <button className="btn btn-danger btn-sm" onClick={() => deleteItem(eventRequest?.id)}> Delete </button> */} {/* <button className="btn btn-danger btn-sm" onClick={() => deleteItem(eventRequest?.id)}> Delete </button> */}
</td> </td>
</tr>)) </tr>)
} }
</tbody> </tbody>
</table> </table>
</div>
</div>;
return (
<>
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item>Medical</Breadcrumb.Item>
<Breadcrumb.Item active>
Appointment Requests Information
</Breadcrumb.Item>
</Breadcrumb>
<div className="col-md-12 text-primary">
<h4>
All Medical Appointment Requests
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
</h4>
</div>
</div>
<div className="app-main-content-list-container">
<div className="app-main-content-list-func-container">
<Tabs defaultActiveKey="activeRequests" id="requests-tab" onSelect={(k) => showDoneItems(k)}>
<Tab eventKey="activeRequests" title="Active Requests">
{table('active', keyword)}
</Tab>
<Tab eventKey="completedRequest" title="Completed Requests">
{table('done', keyword)}
</Tab>
</Tabs>
<div className="list-func-panel">
<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} />
<button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button>
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Appointment Request</button>
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
</div>
</div> </div>
</div> </div>
</> </>

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

@ -4,9 +4,8 @@ import { useNavigate, useParams } from "react-router-dom";
// import { customerSlice } from "./../../store"; // import { customerSlice } from "./../../store";
import { AuthService, CustomerService, EventsService, ResourceService } from "../../services"; import { AuthService, CustomerService, EventsService, ResourceService } from "../../services";
import Select from 'react-select'; import Select from 'react-select';
import { Button } from "react-bootstrap";
import DateTimePicker from "react-datetime-picker";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
const CreateEvent = () => { const CreateEvent = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -107,8 +106,6 @@ const CreateEvent = () => {
edit_date: new Date(), edit_date: new Date(),
edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }] edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]
} }
console.log('new Event', newEvent);
navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`) navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`)
// EventsService.createNewEvent(newEvent).then(data => goToNext(data.data?.id)); // EventsService.createNewEvent(newEvent).then(data => goToNext(data.data?.id));
}; };
@ -138,177 +135,115 @@ const CreateEvent = () => {
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>
Create New Medical Appointment
</Breadcrumb.Item>
</Breadcrumb>
<div className="col-md-12 text-primary"> <div className="col-md-12 text-primary">
<h5>Create Medical Event <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5> <h4>Create New Medical Appointment <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 className="app-main-content-list-container">
<div>Resource:</div> <div className="app-main-content-list-func-container">
<Select value={medicalResource || ''} onChange={selectedResource => onResourceChange(selectedResource)} options={[{value: '', label: ''}, ...resources.map(resource => ({ <Tabs defaultActiveKey="eventClientInfo" id="event-tab">
value: resource.id || '', <Tab eventKey="eventClientInfo" title="Appointment Client And Time Information">
label: resource?.name || '' <h6 className="text-primary">Client And Start Time</h6>
}))]}></Select> <div className="app-main-content-fields-section">
</div> */} <div className="me-4">
<div className="col-md-6 mb-4"> <div className="field-label">Client
<div>Client:</div> <span className="required">*</span>
<Select value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({ </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>
{/* <div className="col-md-6 mb-4"> <div className="me-4">
<div>Title:</div> <input type="text" value={title || ''} onChange={e => setTitle(e.target.value)}/> <div className="field-label">Start Time
</div> */} <span className="required">*</span>
<div className="col-md-6 mb-4"> </div>
<div>Start Time:</div> <DatePicker <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 mb-4">
<div>Description:</div> <textarea value={description || ''} onChange={e => setDescription(e.target.value)}/>
</div> </div>
<div className="col-md-4 mb-4"> {
<div>New Patient:</div> currentCustomer && <>
<select value={newPatient} onChange={e => setNewPatient(e.target.value)}> <h6 className="text-primary">Client Information</h6>
<option value=""></option> <div className="app-main-content-fields-section">
<option value="yes">Yes</option> <div className="field-body">
<option value="no">No</option> <div className="field-label">Client Name</div>
</select> <div className="field-value">{currentCustomer?.name || ''}</div>
</div> </div>
<div className="col-md-4 mb-4"> <div className="field-body">
<div>Confirmed:</div> <div className="field-label">Preferred Name</div>
<select value={confirmed} onChange={e => setConfirmed(e.target.value)}> <div className="field-value">{currentCustomer?.name_cn || ''}</div>
<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>
<div className="col-md-4 mb-4"> <div className="field-body">
<div>Interpreter Level:</div> <div className="field-label">Pharmacy</div>
<select value={interpreter} onChange={e => setInterpreter(e.target.value)}> <div className="field-value">{currentCustomer?.pharmacy || ''}</div>
<option value=""></option>
<option value="1(译)">1(译)</option>
<option value="2(译)">2(译)</option>
<option value="家(译)">家(译)</option>
<option value="越南语翻译">越南语翻译</option>
<option value="Office">Office</option>
<option value="Office(Phone)">Office(Phone)</option>
</select>
</div> </div>
<div className="col-md-4 mb-4"> <div className="field-body">
<div>Doctor Order:</div> <div className="field-label">Care Provider</div>
<select value={docOrder} onChange={e => setDocOrder(e.target.value)}> <div className="field-value">{currentCustomer?.care_provider || ''}</div>
<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>
<div className="col-md-4 mb-4"> <div className="field-body">
<div>Need Id: </div> <div className="field-label">Birthday</div>
<select value={needId} onChange={e => setNeedId(e.target.value)}> <div className="field-value">{currentCustomer?.birth_date || ''}</div>
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div> </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>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>
</>
}
<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()}> Next </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()}> Next </button>
</div> </div>
</div> </div>
</div> </Tab>
<div className="col-md-4 col-xs-12"> </Tabs>
{/* {currentResource && <fieldset>
<legend>Resource Info</legend>
<p>{currentResource?.name || ''}</p>
<p>{currentResource?.specialty || ''}</p>
<p>{currentResource?.phone || ''}</p>
<p>{currentResource?.contact || ''}</p>
<p>{currentResource?.address || ''}</p>
</fieldset> }
<p></p> */}
{currentCustomer && <fieldset>
<legend>Client Info</legend>
<p>{currentCustomer?.name || ''}</p>
<p>{currentCustomer?.name_cn || ''}</p>
<p>{currentCustomer?.pharmacy || ''}</p>
<p>{currentCustomer?.care_provider || ''}</p>
<p>{currentCustomer?.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>
</> </>
); );
}; };

97
client/src/components/events/EventsList.js
View File

@ -2,7 +2,8 @@ import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, DriverService, ResourceService } from "../../services"; import { AuthService, EventsService, CustomerService, DriverService, ResourceService } from "../../services";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import { Button, Modal } from "react-bootstrap"; import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
import TimePicker from 'react-time-picker'; import TimePicker from 'react-time-picker';
const EventsList = () => { const EventsList = () => {
@ -190,6 +191,14 @@ const EventsList = () => {
setSelectedDate(new Date(selectedDate.setDate(selectedDate.getDate() - 1))); setSelectedDate(new Date(selectedDate.setDate(selectedDate.getDate() - 1)));
} }
const showDeleted = (value) => {
setShowDeletedItems(value === 'archivedEvents');
// Recover all filters
// setKeyword('');
setSorting({key: '', order: ''});
setSelectedItems([]);
}
const getSortingImg = (key) => { const getSortingImg = (key) => {
return sorting.key === key ? (sorting.order === 'asc' ? 'up_arrow' : 'down_arrow') : 'default'; return sorting.key === key ? (sorting.order === 'asc' ? 'up_arrow' : 'down_arrow') : 'default';
} }
@ -314,7 +323,6 @@ const EventsList = () => {
transportationName: transportOptionsList.find((item) => item.id === transportSelected)?.title, transportationName: transportOptionsList.find((item) => item.id === transportSelected)?.title,
eventIds: selectedItems eventIds: selectedItems
}).then(() => { }).then(() => {
console.log(123123);
setSelectedItems([]); setSelectedItems([]);
EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => { EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => {
const results = [...data.data]; const results = [...data.data];
@ -352,42 +360,27 @@ const EventsList = () => {
}; };
}; };
return ( const table = (statusParam) => <div className="list row mb-4">
<>
<div className="list row mb-4">
<div className="col-md-12 text-primary">
<h5>Medical Event One-Day List (With Driver Assignment) <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Medical Event</button> <button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button></h5>
</div>
</div>
<div className="list row mb-4">
<div className="col-md-6 col-sm-12 mb-4">
Pick A Date: <DatePicker selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
</div>
<div className="col-md-12 col-sm-12 mb-4">
<Button className="me-4" variant="outline-primary" onClick={() => goToPreviousDay()} > {'<'} </Button>
<Button className="me-4" variant="outline-primary" onClick={() => goToNextDay()}> {'>'} </Button>
<Button className="me-4" variant="primary" disabled={selectedItems.length === 0} onClick={() => setShowTransportationModal(true)}>Show Assign Transportation Panel</Button>
Show Deleted Events: <input type="checkbox" value={showDeletedItems} checked={showDeletedItems === true} onClick={() => setShowDeletedItems(!showDeletedItems)} />
</div>
<div className="col-md-12"> <div className="col-md-12">
<table className="personnel-info-table"> <table className="personnel-info-table">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th> <th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
<th className="th-index">No.</th>
{ {
columns.map((column, index) => <th className="sortable-header" key={index}> columns.map((column, index) => <th className="sortable-header" key={index}>
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span> {column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
</th>) </th>)
} }
<th>Customer Date of Birth</th> <th>Customer Date of Birth</th>
<th>Transportation</th> <th>Transportation</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{ {
events && (showDeletedItems ? events : events.filter(event => event.status === 'active')).map(medicalEvent => <tr key={medicalEvent.id}> events && events.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
<td><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td> <td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
<td className="td-index">{index + 1}</td>
<td>{medicalEvent?.customer}</td> <td>{medicalEvent?.customer}</td>
<td>{medicalEvent?.chinese_name}</td> <td>{medicalEvent?.chinese_name}</td>
<td>{medicalEvent?.member_type}</td> <td>{medicalEvent?.member_type}</td>
@ -408,7 +401,55 @@ const EventsList = () => {
} }
</tbody> </tbody>
</table> </table>
</div>
</div>;
return (
<>
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item>Medical</Breadcrumb.Item>
<Breadcrumb.Item active>
Appointment Information
</Breadcrumb.Item>
</Breadcrumb>
<div className="col-md-12 text-primary">
<h4>
Medical Event One-Day List (With Driver Assignment)
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
</h4>
</div>
</div>
<div className="app-main-content-list-container">
<div className="app-main-content-list-func-container">
<Tabs defaultActiveKey="activeEvents" id="requests-tab" onSelect={(k) => showDeleted(k)}>
<Tab eventKey="activeEvents" title="Active Appointments">
<div className="app-main-content-fields-section with-function">
<Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
<DatePicker className="me-2" selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
<Button className="me-2 ms-2" variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
<Button className="me-2" variant="primary" size="sm" disabled={selectedItems.length === 0} onClick={() => setShowTransportationModal(true)}> + Show Assign Transportation Panel</Button>
</div>
{table('active')}
</Tab>
<Tab eventKey="archivedEvents" title="Archived Appointments">
<div className="app-main-content-fields-section with-function">
<Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
<DatePicker className="me-2" selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
<Button className="me-2 ms-2" variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
</div>
{table('inactive')}
</Tab>
</Tabs>
<div className="list-func-panel">
{/* <input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} /> */}
<button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button>
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Medical Appointment</button>
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
</div>
</div> </div>
</div> </div>
<Modal show={showTransportationModal} onHide={() => closePanel()}> <Modal show={showTransportationModal} onHide={() => closePanel()}>
@ -417,17 +458,15 @@ const EventsList = () => {
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<> <>
<div> <div className="app-main-content-fields-section">
Select Transportation: <div className="mb-4 me-4"></div>
<div> <div className="field-label">Select Transportation</div>
<select value={transportSelected} onChange={(e)=>{setTransportSelected(e.currentTarget.value)}}> <select value={transportSelected} onChange={(e)=>{setTransportSelected(e.currentTarget.value)}}>
<option value=""></option> <option value=""></option>
<option value="create_new">Create A New Transportation</option> <option value="create_new">Create A New Transportation</option>
{transportOptionsList.map((item) => <option key={item.id} value={item.id}>{item.title}</option>)} {transportOptionsList.map((item) => <option key={item.id} value={item.id}>{item.title}</option>)}
</select> </select>
</div> </div>
</div>
{transportSelected === 'create_new' && ( {transportSelected === 'create_new' && (
<> <>
<hr/> <hr/>

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

@ -3,7 +3,8 @@ import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, ResourceService } from "../../services"; import { AuthService, EventsService, CustomerService, ResourceService } from "../../services";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import Select from 'react-select'; import Select from 'react-select';
import moment from 'moment-timezone'; import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal, DropdownButton, Dropdown } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
const EventsMultipleList = () => { const EventsMultipleList = () => {
@ -19,6 +20,7 @@ const EventsMultipleList = () => {
const [selectedCustomer, setSelectedCustomer] = useState(null); const [selectedCustomer, setSelectedCustomer] = useState(null);
const [filteredEvents, setFilteredEvents] = useState(events); const [filteredEvents, setFilteredEvents] = useState(events);
const [showDeletedItems, setShowDeletedItems] = useState(false); const [showDeletedItems, setShowDeletedItems] = useState(false);
const [showFilterDropdown, setShowFilterDropdown] = useState(false);
const columns = [ const columns = [
@ -248,37 +250,6 @@ const EventsMultipleList = () => {
} }
const generateMedicalNotificationPdf = () => { const generateMedicalNotificationPdf = () => {
// const inputData = {
// events: []
// };
// selectedItems?.forEach((id) => {
// const event = events.find(item => item.id === id);
// inputData.events.push({
// event_time: moment(event.start_time).format('hh:mm A MM/DD/YYYY dddd'),
// client_name: event.data.client_name,
// client_status: '会员',
// client_dob: event.data.client_birth_date,
// client_pcp: event.data.client_pcp,
// client_pharmacy: event.data.client_pharmacy,
// client_seating: event.data.client_seating,
// doctor_name: event.data.resource_name,
// doctor_phone: event.data.resource_phone,
// doctor_contact: event.data.resource_contact,
// doctor_address: event.data.resource_address,
// title: event.title,
// description: event.description,
// interpreter: event.data.interpreter,
// fasting: event.data.fasting,
// confirmed: event.data.confirmed,
// new_patient: event.data.new_patient,
// doc_order: event.data.doc_order,
// need_id: event.data.need_id,
// need_med_list: event.data.need_med_list,
// reason: event.data.reason,
// notes: event.data.notes,
// other: event.data.other
// });
// });
if (selectedItems?.length <= 0) { if (selectedItems?.length <= 0) {
window.alert("Please select at least one event record") window.alert("Please select at least one event record")
} else { } else {
@ -291,60 +262,6 @@ const EventsMultipleList = () => {
if (selectedItems?.length <= 0) { if (selectedItems?.length <= 0) {
window.alert("Please select at least one event record") window.alert("Please select at least one event record")
} else { } else {
// let customer = {};
// const inputData = {
// events: []
// };
// for (const id of selectedItems) {
// const event = events.find(item => item.id === id);
// if (!event?.data?.customer) {
// const legacyClient = (await CustomerService.getClient(event.target_uuid))?.data;
// const mappingCustomer = customers.find((item) => item.email === legacyClient.email && item.username === legacyClient.username);
// customer = mappingCustomer;
// } else {
// customer = customers.find(c => c.id === event?.data?.customer);
// }
// let pharmacyInfo = 'This patient has no contracted pharmacy.\n' +
// 'Please give the prescription directly to the patient';
// const pharmacy = resources.find(r => (r.id === customer?.pharmacy_id)) || resources.find(r => (r.name?.toLowerCase() === event.data.client_pharmacy?.toLowerCase()));
// if (pharmacy) {
// pharmacyInfo = `${pharmacy?.name} @ ${pharmacy?.address} \n` +
// `phone:${pharmacy?.phone} fax:${pharmacy?.fax}`;
// } else {
// if (event.data.client_pharmacy) {
// pharmacyInfo = 'Pharmacy: ' + event.data?.client_pharmacy;
// }
// }
// const clientName = (customer?.name_cn && event?.data?.client_name && `${event?.data?.client_name} ${customer?.name_cn}`) || customer?.name_cn || `${customer?.lastname}, ${customer?.firstname}`;
// inputData.events.push({
// event_time: moment(event.start_time).format('MM/DD/YYYY hh:mm A'),
// client_name: clientName, // event.data.client_name,
// client_status: '会员',
// client_dob: event.data.client_birth_date,
// client_pcp: event.data.client_pcp,
// client_pharmacy: event.data.client_pharmacy,
// client_seating: event.data.client_seating,
// doctor_name: event.data.resource_name,
// doctor_phone: event.data.resource_phone,
// doctor_contact: event.data.resource_contact,
// doctor_address: event.data.resource_address,
// title: event.title,
// description: event.description,
// interpreter: event.data.interpreter,
// fasting: event.data.fasting,
// confirmed: event.data.confirmed,
// new_patient: event.data.new_patient,
// doc_order: event.data.doc_order,
// need_id: event.data.need_id,
// need_med_list: event.data.need_med_list,
// reason: event.data.reason,
// notes: event.data.notes,
// other: event.data.other,
// pharmacy_info: pharmacyInfo
// })
// }
const inputData = { eventIds: selectedItems }; const inputData = { eventIds: selectedItems };
EventsService.generateSheet(inputData); EventsService.generateSheet(inputData);
} }
@ -355,58 +272,6 @@ const EventsMultipleList = () => {
if (selectedItems?.length <= 0) { if (selectedItems?.length <= 0) {
window.alert("Please select at least one event record") window.alert("Please select at least one event record")
} else { } else {
// let customer = {};
// const inputData = {
// events: []
// };
// for (const id of selectedItems) {
// const event = events.find(item => item.id === id);
// if (!event?.data?.customer) {
// const legacyClient = (await CustomerService.getClient(event.target_uuid))?.data;
// const mappingCustomer = customers.find((item) => item.email === legacyClient.email && item.username === legacyClient.username);
// customer = mappingCustomer;
// } else {
// customer = customers.find(c => c.id === event?.data?.customer);
// }
// let pharmacyInfo = 'This patient has no contracted pharmacy.\n' +
// 'Please give the prescription directly to the patient';
// const pharmacy = resources.find(r => (r.id === customer?.pharmacy_id)) || resources.find(r => (r.name?.toLowerCase() === event.data.client_pharmacy?.toLowerCase()));
// if (pharmacy) {
// pharmacyInfo = `${pharmacy?.name} @ ${pharmacy?.address} \n` +
// `phone:${pharmacy?.phone} fax:${pharmacy?.fax}`;
// } else {
// if (event.data.client_pharmacy) {
// pharmacyInfo = 'Pharmacy: ' + event.data?.client_pharmacy;
// }
// }
// const clientName = (customer?.name_cn && event?.data?.client_name && `${event?.data?.client_name} ${customer?.name_cn}`) || customer?.name_cn || `${customer?.lastname}, ${customer?.firstname}`;
// inputData.events.push({
// event_time: moment(event.start_time).format('MM/DD/YYYY hh:mm A'),
// client_name: clientName, // event.data.client_name,
// client_status: '会员',
// client_dob: event.data.client_birth_date,
// client_pcp: event.data.client_pcp,
// client_pharmacy: event.data.client_pharmacy,
// client_seating: event.data.client_seating,
// doctor_name: event.data.resource_name,
// doctor_phone: event.data.resource_phone,
// doctor_contact: event.data.resource_contact,
// doctor_address: event.data.resource_address,
// title: event.title,
// description: event.description,
// interpreter: event.data.interpreter,
// fasting: event.data.fasting,
// confirmed: event.data.confirmed,
// new_patient: event.data.new_patient,
// doc_order: event.data.doc_order,
// need_id: event.data.need_id,
// need_med_list: event.data.need_med_list,
// reason: event.data.reason,
// notes: event.data.notes,
// other: event.data.other,
// pharmacy_info: pharmacyInfo
// })
// }
const inputData = { eventIds: selectedItems }; const inputData = { eventIds: selectedItems };
EventsService.generateSheetPDF(inputData); EventsService.generateSheetPDF(inputData);
} }
@ -417,97 +282,29 @@ const EventsMultipleList = () => {
if (selectedItems?.length <= 0) { if (selectedItems?.length <= 0) {
window.alert("Please select at least one event record"); window.alert("Please select at least one event record");
} else { } else {
// const inputData = {
// events: [],
// docTemplateName: "med_notification"
// };
// selectedItems?.forEach((id) => {
// const event = events.find(item => item.id === id);
// inputData.events.push({
// event_time: moment(event.start_time).format('hh:mm A MM/DD/YYYY dddd'),
// client_name: event.data.client_name,
// client_status: '会员',
// client_dob: event.data.client_birth_date,
// client_pcp: event.data.client_pcp,
// client_pharmacy: event.data.client_pharmacy,
// client_seating: event.data.client_seating,
// doctor_name: event.data.resource_name,
// doctor_phone: event.data.resource_phone,
// doctor_contact: event.data.resource_contact,
// doctor_address: event.data.resource_address,
// title: event.title,
// description: event.description,
// interpreter: event.data.interpreter,
// fasting: event.data.fasting,
// confirmed: event.data.confirmed,
// new_patient: event.data.new_patient,
// doc_order: event.data.doc_order,
// need_id: event.data.need_id,
// need_med_list: event.data.need_med_list,
// reason: event.data.reason,
// notes: event.data.notes,
// other: event.data.other
// });
// });
const inputData = { eventIds: selectedItems }; const inputData = { eventIds: selectedItems };
EventsService.generateDoc(inputData); EventsService.generateDoc(inputData);
} }
};
} const showDeleted = (value) => {
setShowDeletedItems(value === 'archivedEvents');
return ( // Recover all filters
<> // setKeyword('');
<div className="list row mb-4 noprint"> setSorting({key: '', order: ''});
<div className="col-md-12 text-primary"> setSelectedItems([]);
<h5>Medical Event Multiple Days List };
<button className="btn btn-primary btn-sm me-2 ms-2" onClick={() => {goToCreateNew()}}>Create New Medical Event</button>
<button className="btn btn-link btn-sm me-2" onClick={() => {redirectToAdmin()}}>Back</button>
</h5>
</div>
<div className="col-md-12 text-primary">
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
</div>
</div>
<div className="list row mb-4">
<div className="col-md-12 noprint">
Pick a Date Range
</div>
<div className="col-md-4 col-sm-12 mb-4 noprint">
From: <DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
</div>
<div className="col-md-4 col-sm-12 mb-4 noprint">
To: <DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
</div>
<div className="col-md-12 noprint">
You can Filter By:
</div>
<div className="col-md-4 col-sm-12 mb-4 noprint">
Customer: <Select value={selectedCustomer || ''} onChange={selectedData => {setSelectedCustomer(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...customers.map(resource => ({
value: resource?.id || '',
label: resource?.name || '',
}))]}></Select>
</div>
<div className="col-md-4 col-sm-12 mb-4 noprint">
Resource: <Select value={selectedResource || ''} onChange={selectedData => {setSelectedResource(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...resources?.filter(r => r.status === 'active').map(resource => ({
value: resource?.id || '',
label: resource?.name || '',
}))]}></Select>
</div>
<div className="col-md-4 col-sm-12 mb-4 noprint">
Show Deleted Events: <input type="checkbox" value={showDeletedItems} checked={showDeletedItems === true} onClick={() => {setShowDeletedItems(!showDeletedItems); setSelectedItems([]);}} />
</div>
const table = (statusParam) => <div className="list row mb-4">
<div className="col-md-12"> <div className="col-md-12">
<table className="personnel-info-table"> <table className="personnel-info-table">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th> <th className="th-checkbox" ><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
<th className="th-index">No.</th>
{ {
columns.map((column, index) => <th className="sortable-header" key={index}> columns.map((column, index) => <th className="sortable-header" key={index}>
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span> {column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
</th>) </th>)
} }
<th>Customer Date of Birth</th> <th>Customer Date of Birth</th>
@ -518,8 +315,9 @@ const EventsMultipleList = () => {
</thead> </thead>
<tbody> <tbody>
{ {
filteredEvents && (showDeletedItems ? filteredEvents: filteredEvents.filter(event => event.status === 'active')).map(medicalEvent => <tr key={medicalEvent.id}> filteredEvents && filteredEvents.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
<td><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td> <td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
<td className="td-index">{index + 1}</td>
<td>{medicalEvent?.customer}</td> <td>{medicalEvent?.customer}</td>
<td>{medicalEvent?.chinese_name}</td> <td>{medicalEvent?.chinese_name}</td>
<td>{medicalEvent?.member_type}</td> <td>{medicalEvent?.member_type}</td>
@ -540,7 +338,193 @@ const EventsMultipleList = () => {
} }
</tbody> </tbody>
</table> </table>
</div>
</div>;
const cleanFilterAndClose = () => {
setSelectedCustomer(null);
setSelectedResource(null);
setShowFilterDropdown(false);
}
const FilterAndClose = () => {
setShowFilterDropdown(false);
}
const customMenu = React.forwardRef(
({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
const [value, setValue] = useState('');
return (
<div
ref={ref}
style={style}
className={className}
aria-labelledby={labeledBy}
>
<h6>Filter By</h6>
<div className="app-main-content-fields-section margin-sm">
<div className="me-4">
<div className="field-label">Customer</div>
<Select styles={{
control: (baseStyles, state) => ({
...baseStyles,
width: '210px',
height: '35px',
'padding-top': 0,
'padding-bottom': 0,
'margin-top': 0,
'margin-bottom': 0
}),
indicatorSeparator: (baseStyles, state) => ({
...baseStyles,
width: 0
}),
indicatorsContainer: (baseStyles) => ({
...baseStyles,
'margin-top': '-20px'
}),
placeholder: (baseStyles) => ({
...baseStyles,
'margin-top': '-20px',
'font-size': '13px'
}),
singleValue: (baseStyles, state) => ({
...baseStyles,
'margin-top': '-20px',
'font-size': '13px'
})
}} value={selectedCustomer || ''} onChange={selectedData => {setSelectedCustomer(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...customers.map(resource => ({
value: resource?.id || '',
label: resource?.name || '',
}))]}></Select>
</div>
</div>
<div className="app-main-content-fields-section margin-sm">
<div className="me-4">
<div className="field-label">Resource</div>
<Select styles={{
control: (baseStyles, state) => ({
...baseStyles,
width: '210px',
height: '25px',
'padding-top': 0,
'padding-bottom': 0,
'margin-top': 0,
'margin-bottom': 0
}),
indicatorSeparator: (baseStyles, state) => ({
...baseStyles,
width: 0
}),
indicatorsContainer: (baseStyles) => ({
...baseStyles,
'margin-top': '-20px'
}),
placeholder: (baseStyles) => ({
...baseStyles,
'margin-top': '-20px',
'font-size': '13px'
}),
singleValue: (baseStyles, state) => ({
...baseStyles,
'margin-top': '-20px',
'font-size': '13px'
})
}} value={selectedResource || ''} onChange={selectedData => {setSelectedResource(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...resources?.filter(r => r.status === 'active').map(resource => ({
value: resource?.id || '',
label: resource?.name || '',
}))]}></Select>
</div>
</div>
<div className="list row">
<div className="col-md-12">
<button className="btn btn-default btn-sm float-right" onClick={() => cleanFilterAndClose()}> Cancel </button>
<button className="btn btn-primary btn-sm float-right" onClick={() => FilterAndClose()}> Filter </button>
</div>
</div>
</div>
);
},
);
return (
<>
<div className="list row mb-4 noprint">
<Breadcrumb>
<Breadcrumb.Item>Medical</Breadcrumb.Item>
<Breadcrumb.Item active>
Appointment Information (Multi Days)
</Breadcrumb.Item>
</Breadcrumb>
<div className="col-md-12 text-primary">
<h4>
Medical Event Multiple Days List
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
</h4>
</div>
</div>
<div className="app-main-content-list-container">
<div className="app-main-content-list-func-container">
<Tabs defaultActiveKey="activeEvents" id="requests-tab" onSelect={(k) => showDeleted(k)}>
<Tab eventKey="activeEvents" title="Active Appointments">
<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([]);}} />
</div>
<div className="me-4">
<div className="field-label">To</div>
<DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
</div>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
</div>
{table('active')}
</Tab>
<Tab eventKey="archivedEvents" title="Archived Appointments">
<div className="app-main-content-fields-section-flex-end with-function flex-end">
<div className="me-4">
<div className="field-label">From</div>
<DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
</div>
<div className="me-4">
<div className="field-label">To</div>
<DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
</div>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
</div>
{table('inactive')}
</Tab>
</Tabs>
<div className="list-func-panel">
{/* <input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} /> */}
{/* <button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button> */}
<Dropdown
key={'filter-event-multi-list'}
id="filter-event-multi-list"
className="me-2"
show={showFilterDropdown}
onToggle={() => setShowFilterDropdown(!showFilterDropdown)}
>
<Dropdown.Toggle variant="primary">
<Filter size={16} className="me-2"></Filter>Filter
</Dropdown.Toggle>
<Dropdown.Menu as={customMenu}/>
</Dropdown>
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Medical Appointment</button>
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
</div>
</div> </div>
</div> </div>
</> </>

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

@ -147,7 +147,19 @@ const SideMenu = () => {
{ {
name: 'Appointment Calendar', name: 'Appointment Calendar',
link: '/medical/events/calendar', link: '/medical/events/calendar',
category: '/events', category: '/events/calendar',
roleFunc: AuthService.canAccessLegacySystem
},
{
name: 'Appointment One-Day List',
link: '/medical/events/list',
category: '/events/list',
roleFunc: AuthService.canAccessLegacySystem
},
{
name: 'Appointment Multi-Days List',
link: '/medical/events/multiple-list',
category: '/events/multiple-list',
roleFunc: AuthService.canAccessLegacySystem roleFunc: AuthService.canAccessLegacySystem
} }
] ]