Coco Queue Management System Software for Hospital (Queue Management System).

Requirements

Operating system: support for Windows + Linux.

Services need to install:
Web service: NodeJS: Download
Database: MongoDB: Download
Mail server: Mailgun: https://login.mailgun.com/login/
Google Speech to Text: https://cloud.google.com/?hl=en
OS: Windows 10, Windows 11 or Windows Server 2018 or higher.

Configure Source Code

This is a general installation overview of the script.
Follow the steps as explained, and you will complete the installation process.

A. SOURCE CODE CONFIG

Open file .env.example and rename to .env located inside script folder.
* Replace "" with your database username, password and database name.
- If you have not turned on the authentication on MongoDB, you do not need to provide username and password.
MONGO_USER=""
MONGO_PASSWORD=""
MONGO_DB_NAME="qms_db"
- If you have turned on authentication on MongoDB, you need to provide username and password.
You can review the list of user management with the following commands:
$ mongosh -u admin_user -p admin_password --authenticationDatabase admin
$ use qms_db
$ show users
Example: username = "qms_user" and password = "qms_password"
MONGO_USER="qms_user"
MONGO_PASSWORD="qms_password"
MONGO_DB_NAME="qms_db"

* Replace your url and port.
By default, the Sails.js application will run at port 1337 and url is http: // localhost: 1337.
SAILS_PORT=1337
SAILS_BASE_URL="http://localhost:1337"

* Replace "" with your maigun credentials you have when register on Mailgun.
MAIL_AUTH_USER="no-reply@yourdomain.com"
MAIL_AUTH_PASSWORD="xxx"
MAIL_AUTH_HOST="smtp.eu.mailgun.org"
MAIL_AUTH_PORT="587"
MAIL_FROM="no-reply@yourdomain.com"

* If you need to send / received email, we support Mailgun service, please replace all the credentials above by your Mailgun server config. Reference: https://documentation.mailgun.com/

Then Upload all files/folders located inside "script" folder to your server.

One Click Installation (Web App)

- Ensure that Node.JS, MongoDB is installed on your computer.
- Ensure that Web server API is started. (Backend API)
- Ensure that HTTP server is started. (Frontend)

A- Run the Web server API.

Login to your server and go to source code folder:
$ cd /path/to/qms/
Note: You MUST go to working folder contains source code before run script.
Before run application, you need to install all the dependencies below:
$ npm install -g sails - Required to run API server App
$ npm install -g forever - Required to run forever on production
$ npm install -g serve - Required to run HTTP server for frontend app
$ npm install


To start our application, run the following command:
$ sails lift

Now your node server is running on PORT 1337.
To stop our application, press CTRL+ C

** Note: CocoQMS build on Sails JS Framework, so if you need further information how to config advanced, reference: https://sailsjs.com/get-started
If you need to run forever on production enviroment, run the following command using "forever": $ forever start app.js

B- Run the HTTP server frontend.

$ cd /path/to/qms/frontend
serve -s dist to run the application.
The default port for running the application will be 3000. You can customize it by adding the parameter -l [YOUR_PORT].
Example: to run the application on port 4000, use the command serve -s dist -l 4000.

C- One Click Installation

After starting both the web server API and the HTTP server frontend, go to http://localhost:3000/installation to set up the initial data.



Here you can perform the following steps to quickly install the application:

• Step 1: Enter the required information, then select Install to install.
  
• Step 2: Choose Log in to go to the Login page. Use your previously registered account to log in.
  

Integrate with 3rd API

You can also integrate with the hospital's or clinic's patient management system by linking the queue number with the patient code. We provide sample APIs for your reference and self-integration.
Replace our API with your API. The returned data format should be JSON. For example:

The attributes of data:
- patient_id: Patient code.
- fullname: Full name.
- address: Address.

In addition, you can search for patients using a keyword. The system will look for patients whose full name or patient ID contains that keyword.
For example, as shown above: keyword=Angel

You can also refer to our Postman collection by importing `CocoQMS.postman_collection.json` from the "postman" folder.

Google Text-to-Speech API

You need Google Text-to-Speech service, because we have to play audio sound on TV device or any android device support browser and have sound card.
For ex: After the patient presses GET NUMBER, the TV screen will play a sound: `Customers with number [NUMBER_ID], please proceed to counter number [COUNTER_CODE]`.
With [NUMBER_ID] and [COUNTER_CODE] as variables, we can configure any sound to support.
Refer more as: USER GUIDE > Audio Management
** Note: You can also upload your own voice instead of using the Google Text-to-Speech service AI.

Create Google Cloud account:
Visit Google Cloud Platform at https://cloud.google.com.
If you do not have a Google Cloud account, register your account. And then click "Console" to go to the dashboard page.


Create a new project:
After logging into Google Cloud Platform, click the drop -down menu in the upper left corner and select "New Project".


Fill in the project name and select the location (if necessary), then click "Create".


Activate Google Text-to-Speech API:
In your project management page, click the menu "Apis & Services"> "Library".
Search "Text-to-Speech API" and click it.


Click the "Enable" button to activate the API.


Create authentication API Key:
In "Enabled APIs & Services" > "Credentials", click "Create Credentials" and select "Service account".



Fill in the service account name, service account ID and then click "Create and continue".

Select a role (optional) and then click "Continue".

Click "Done" to complete.

Click the email you created.

In "Keys", click "Add key" and select "Create new key"

Choose key type is JSON and click "Create".


Google will create a private key and save it to your computer.


Open file and rename to credentials.json and put it inside the script folder. You will need it to use API to create audio files.

Deployment

We recommend to use this app on Linux enviroment and with NginX service. If you are using Windows, please config with IIS service by yourself. Refer: Deploy React application

Run the application on Linux:

Config Nginx file:
You need 1 domain to configure: for ex: queuedemo.com (website) and api.queuedemo.com (api).
Download the sample file here: sample-api.conf and sample.conf .

With API domain:
Replace the demo API domain name with your API domain name.
Replace path to script folder with your path to script folder.
Replace port with your port.


With website domain:
Replace the demo website domain name with your website domain name.
Replace path to script folder with your path to script folder.


Ensure that the Nginx configuration file works with the API domain and the main website domain.
$ service nginx restart
Visit the domain name on the browser to check.

Customer Process Guide

Below is the basic process for guests - customers coming for medical treatment:

Step 1: The customer arrives at the reception desk or uses their phone to scan the QR code and get a queue number.
Step 2: The customer waits for their turn.
Step 3: The screen displays the queue number, and the customer moves to the counter when called.
Step 4: The staff serves and directs the customer to the next counter if needed. Repeat from Step 3.
Step 5: Finish and leave.

1/ Get Token Number

Guideline to Get Token Number from Kiosk Device (Admin setup)

• Step 1:
  Visit the page to get the token number via the URL [YOUR_DOMAIN]/ticket. We provide a domain for testing token number retrieval. Refer here.
  
• Step 2:
  Select one of the displayed services to get the token number for the corresponding service.
  
  
  If there is a Print icon in the upper right corner of the services, a print dialog box will automatically appear after successfully getting the token number.
  You can print the ticket using the usual steps.
  If you want the application to automatically print each time the token number is successfully retrieved, refer to the FAQs.
  
  After successfully getting the number, the information about the token number, selected service, and designated counter will be displayed in the frame below the service list.
  

Guideline to Get Token Number by Scanning QR Code

Use QR Code Scanner to scan the corresponding QR Code of the service provided by system.

2/ QR Code Scanner

Visit the website via the URL [YOUR_DOMAIN]/qrcode-scanner. We provide a domain for testing QR code scanning functionality. Refer here.

QR Code Scanning Guide

• Step 1:
  Allow the website to use the device's camera if prompted and reload the page.
  Select Start scan to turn on the camera.
  
• Step 2:
  Scan the QR code following the steps below. The QR Code is obtained from Configure Services in System Settings.
  Example: QR Code of Insurance Examination service.
  
  
  Note: Users cannot scan the same QR Code more than once within 5 minutes.
  
  
  (1) Stop QR Code Scanning: Turn off the device's camera and stop QR Code scanning.
  (2) Switch Camera: Switch between the front and rear cameras of the device.
  (3) Device Camera: Device camera area.
• Step 3:
  After successful scanning, ticket information and history will be updated. Similarly, when forwarded to the counters, history will also be updated automatically.
  

Guide to Download the Application on Mobile

On Android

• Step 1:
  Open the application in the Chrome browser and download the application by following the steps below.
  
• Step 2:
  Use the downloaded application as described in the QR Code Scanning Guide above.

On IOS

• Step 1:
  Open the application in the Safari browser and download the application by following the steps below.
  
• Step 2:
  Use the downloaded application as described in the QR Code Scanning Guide above.

Staff Process Guide

Below is the basic process for staff to serve and coordinate customers:

Step 1: Receive the customer called to the counter. You can prioritize customers at the staff management screen.
Step 2: Serve the customer. If the customer does not arrive, you can skip with the missed call option on the management screen. Repeat from Step 1.
Step 3: Guide the customer to the next counter.
Step 4: Select the next counter (if available) and mark as served on the management screen to update the queue.
Step 5: Repeat from Step 1.

1/ Counter 1 (Example for Reception Screen)

Description of Customer List:

The following operations can be performed on the customer list:

(1) Search Served Customers: search for served customers in the list by Customer Code or Name.

Instructions for Serving in Non-Demo Data Mode

Non-Demo Data Mode uses data from patients or hospital customers through a 3rd party API. Refer to PATIENT DATA INTEGRATION for more details on customization.

• Step 1:
  Customers arrive at the counter and provide personal information (Medical examination code, full name, or address) for the staff to search for their information.
• Step 2:
  Click on the search icon or enter the patient's information into the customer search bar, select the customer and the counter to move to, then click Done to complete.
  
  
  After completion, the Waiting to Call, Called, and Being Served lists will be updated.

Instructions for Serving in Demo Data Mode

Demo Data Mode uses patient data from the file mock-patient-data.json. You can update patient data according to the predefined structure in this file on the Frontend.

• Step 1:
  Customers arrive at the counter and provide personal information (Medical examination code, full name, or address) for the staff to search for their information.
• Step 2:
  Click on the search icon or enter the patient's information into the customer search bar, select the customer and the counter to move to, then click Done to complete.
  
  
  After completion, the Waiting to Call, Called, and Being Served lists will be updated.

Missed Call

Select the Missed Call button.


After completion, the Waiting to Call and Being Served lists will be updated.

Priority Call

Select the Call button on a specific customer.


After completion, the Waiting to Call and Being Served lists will be updated.

2/ Counter 2 (Example for Cashier Screen)

Description of Customer List:

The following operations can be performed on the customer list:

(1) Search Customers Waiting for Payment: search for guests - customers waiting for payment in the list by Customer Code or Name.
(2) Search Customers who have Paid: search for guests - customers who have already paid in the list by Customer Code or Name.

Payment Completed

Select the next counter, then click Payment.


After completion, the lists of Waiting for Payment, Paid, and Being Served customers will be updated.

Missed Call

Select the Missed Call button.


After completion, the lists of Waiting for Payment and Being Served customers will be updated.

Call for Payment

Select the Call button on a specific customer.


After completion, the lists of Waiting for Payment and Being Served customers will be updated.

3/ Counter 3 (Example for Doctor Screen)

Description of Customer List:

The following operations can be performed on the customer list:

(1) Search Customers Waiting for Examination: search for guests - customers waiting for examination in the list by Customer Code or Name.
(2) Search Customers who have been Examined: search for guests - customers who have already been examined in the list by Customer Code or Name.

Examination Completed

Select the next counter, then click Examine.


After completion, the lists of Waiting for Examination, Examined, Being Served, and Customer Statistics will be updated.

Missed Call

Select the Missed Call button.


After completion, the lists of Waiting for Examination, Being Served, and Customer Statistics will be updated.

Call for Examination

Select the Examine button on a specific customer.


After completion, the lists of Waiting for Examination, Being Served, and Customer Statistics will be updated.

4/ Counter 4 (Example for Pharmacist Screen)

Description of Customer List:

The following operations can be performed on the customer list:

(1) Search Customers Waiting for Medication Collection: search for guests - customers waiting for medication collection in the list by Customer Code or Name.
(2) Search Customers who have Collected Medication: search for guests - customers who have already collected medication in the list by Customer Code or Name.

Deliver Pharma Completed

Select Deliver pharma.


After completion, the lists of Waiting for Medication Collection, Medication Collected, and Being Served will be updated.

Missed Call

Select the Missed Call button.


After completion, the lists of Waiting for Medication Collection and Being Served will be updated.

Call for Medication Collection

Select the Call button on a specific customer.


After completion, the lists of Waiting for Medication Collection and Being Served will be updated.

Administrator System Setup Guide

CocoQMS helps hospitals manage customers, staff, and workflows corresponding to departments and setups in each department such as displays and audio. Below is a detailed guide.

1/ Log in to the website

Access the system via the URL [YOUR_DOMAIN]/login.

Login guide is not in Demo accounts mode.

At the login screen, enter your Email and Password.
Choose Log in to complete.

Login guide is in Demo accounts mode.

At the login screen, select any account in the table below.
Choose Log in to complete.

2/ Forgot Password

• Step 1:
  At the login interface, click on Forgot Password to access the page for receiving a new password.
  
• Step 2:
  Enter the email associated with your account into the field, then click Send to receive a new password via email.
  
  Use the new password to log in.

3/ Overview

• Step 1:
  On the main interface, select Overview.
  
• Step 2:
  Patients Statistics
  Choose a counter and a time range to view the customers statistics chart.
  
  
  
  Counter Shift Calendar
  

  Step 1: Select a time range to view the shift calendar during that period.
  

  
  

  Step 2: Select personnel at the counter and the corresponding date to update the shift calendar.
  

4/ Counter Management

Counter List

On the main interface, select Counter.


Description of Counter List:

Operations that can be performed on the main page include:

(1) Select List View Mode: Switch to list view mode for counters.
(2) Select Grid View Mode: Switch to grid view mode for counters.
(3) Search for Counter: Search for counters by Counter Code or Counter Name.
(4) Filter Counters: Filter the counter list by Status.
(5) Upload Excel File: Upload counter list using an Excel file. Ensure the correct format and do not modify column structure; maximum file size is 20MB.
(6) Export to Excel File: Export counter data to an Excel spreadsheet.

Add Counter

• Step 1:
  Click Add New to add a new counter.
  
• Step 2:
  Fill in the counter information:
  Counter Code: Specifies a code with a maximum of 10 characters in the format A-Z 0-9, without special characters.
  Counter Name: Enter the counter name. Example: Cashier, Accountant.
  Display: Select the display that the counter will use to display information.
  Note: Depending on the number of counters, the display screen will display corresponding columns.
  Example: If you select 2 counters such as Reception, Cashier on Display TV 01, the screen will display 2 columns corresponding to the 2 counters. For more details, see the link Display Management .
  Staff: Select the staff member who will work at the counter.
  Workflow: Select the workflow for the counter. Each workflow will have a sequence, separate sound flow, defining the customer examination process.
  Ordinal: Enter the order for the counter, used to distinguish between counters and arrange in increasing order in the list, convenient for monitoring and managing counters.
  Status: Operational status of the counter; if turned off, the counter will be hidden from other sections such as staff, displays, counter shift schedule, workflow.
  
  Then click Save.
  

Edit Counter

1. From the counter list screen (list view), you can update counter information by performing the following actions:

(1) Enable/Disable Status: Temporarily lock/unlock the counter.
(2) Quick Edit: Quickly change counter information.
(3) Detailed Edit: Edit detailed counter information.

1.1 Quick Edit Guide:

• Step 1: Click on the Quick Edit icon.
• Step 2:
  Select display and staff for the counter, then click Save.
  

1.2 Detailed Edit Guide:

• Step 1: Click on the Detailed Edit icon.
• Step 2:
  Update the counter information similar to adding new, then click Update.
  

2. From the counter list screen (grid view), you can update counter information by performing the following actions:

(1) Edit Staff: Edit counter staff.
(2) Detailed Edit: Hover over the Menu icon, then select Update to edit detailed counter information.

2.1 Edit Staff Guide:

Select staff for the counter.

2.2 Detailed Edit Guide:

• Step 1:
  Click on the Detailed Edit icon.
• Step 2:
  Update the counter information similar to adding new, then click Update.
  

Delete Counter

1. From the counter list screen (list view), you can delete a counter by performing the following actions:

1.1 Delete Single Counter Guide

Select the Delete icon and Ok to delete the corresponding counter.

1.2 Delete Multiple Counters Guide

• Step 1:
  Select the Checkbox icon for the counters to be deleted, then click Delete.
  
• Step 2:
  Click Ok to confirm deletion of the selected counters.
  

2. From the counter list screen (grid view), you can delete a counter by performing the following steps:

• Step 1:
  Hover over the Menu icon, then select Delete.
  
  (1): Menu
• Step 2:
  Click Ok to confirm deletion of the counter.
  

5/ Display Management

Display List

On the main interface, select Display.


Description of Display List:

Operations that can be performed on the main page include:

(1) Search for Display: Search for displays by Display Code, Display Name, or Description.
(2) Filter Displays: Select Status to filter the display list.
(3) Upload Excel File: Upload display list using an Excel file. Maintain correct format and do not alter column structure; maximum file size is 20MB.
(4) Export to Excel File: Export display data to an Excel spreadsheet.

View Display

Click on the View Display icon for the display whose screen you want to view.


Note: According to browser regulations, the system cannot automatically play sound; you must add your domain to the browser's WHITELIST for the browser to automatically play sound as follows:

• Step 1:
  Access the sound settings of the Chrome browser via the link chrome://settings/content/sound.
  Then select Sites can play sound and click Add.
  
• Step 2:
  Enter the domain of the website you intend to run into the address input field and click Add.
  

Add Display

• Step 1:
  Click Add New to add a new display.
  
• Step 2:
  Enter the display information:
  
  Display Code: Specifies a code with a maximum of 10 characters in the format A-Z 0-9, without special characters. Accessible via URL to the display screen using this code (case insensitive).
  Example: to access the display screen with the code DEVICE003, you can use the URL [YOUR_DOMAIN]/device/view/device003.
  Display Name: Enter the name of the display.
  Description: Enter a description of the display, such as the type of display: TV, Screen, etc.
  
• Step 3:
  Customize the display interface of the display, you can copy existing representative fields (You can replace the field names in file variables.json in Frontend):
  
  {{LOGO}}: Website logo, configured in the General Settings tab under Settings.
  {{APP_NAME}}: Application name, configured in the General Settings tab under Settings.
  {{WORKFLOW_DATA}}: Data of counters using this display, including counter information and information of customers currently being served, in waiting lists and missed calls at counters.
  Ordinal: Display order of counters in the list, used to distinguish between counters for easier tracking and management.
  Max Rows: Maximum number of rows displayed for waiting lists on each screen.
  Example: When selecting maximum rows as 5, only a maximum of 5 customers will be displayed at the top of the waiting queue on the display.
  Headline Font Size: Font size of title headings on the display, such as counter names, names of different types of waiting lists, missed calls, etc.
  Body Font Size: Font size of other information besides headings on the display, such as customer information.
  Status: Status of the display; when turned off, this display cannot be used, simultaneously hiding the display from other categories such as counter management, workflow.
  
  Then click Save.
  

Edit Display

On the main interface, you can update display information by the following actions:

(1) Edit Details: Modify detailed display information.
(2) Enable/Disable Status: Temporarily lock/unlock the display.

Guide to Editing Details

• Step 1: Click on the Edit Details icon.
• Step 2:
  Change the display information as desired, then press Update to save the edited information.
  

Delete Display

Guide to Deleting Individual Display

• Click on the Delete icon and Ok to delete the corresponding display.
  

Guide to Deleting Multiple Displays

• Step 1:
  Select the Checkbox icon for the displays to be deleted, then click Delete.
  
• Step 2:
  Click Ok to confirm deletion of the selected displays.
  

6/ Staff Management

Staff List

On the main interface, select Staff.


Description of Staff List:

Operations that can be performed on the main page include:

(1) Search for Staff: Search for staff members by Staff Code, Staff Name, or Description.
(2) Filter Staff by Status: Select Status to filter the staff list.
(3) Filter Staff by Position: Select the staff member's Position to filter the staff list.
(4) Upload Excel File: Upload staff list using an Excel file. Maintain correct format and do not alter column structure; maximum file size is 20MB.
(5) Export to Excel File: Export staff data to an Excel spreadsheet.

Add Staff

• Step 1:
  Click Add New to add a new staff member.
  
• Step 2:
  Enter the staff member's information:
  
  Staff Code: Specifies a code with a maximum of 10 characters in the format A-Z 0-9, without special characters.
  Full Name: Full name of the staff member.
  Phone Number: Phone number of the staff member in numeric format 0-9.
  Email: Email address of the staff member in standard format.
  Example: abc@gmail.com
  Position: Select the staff member's position from the list.
  Counter: Select the counter that the staff member will manage.
  Birthday: Enter the staff member's birthday, within the current date and displayed according to the date and time settings.
  Sex: Select the sex of the staff member.
  Address: Enter the address of the staff member.
  Password: Enter the account password, length from 6 - 256 characters.
  Confirm Password: Re-enter the password, must match the previously entered password.
  Avatar: Upload the avatar of the account, in standard image format, recommended size is 200x200 px to ensure a 1:1 aspect ratio for best display.
  
  Then click Save.
  

Edit Staff Account

On the main interface, you can update the staff account by the following actions:

(1) Edit Details: Change detailed information of the account.
(2) Enable/Disable Account Function: Perform lock/unlock account.

Guide to Editing Details

• Step 1: Click on the Edit Details icon.
• Step 2:
  Change the account information as desired, then press Save to save the edited information.
  

Guide to Reset Password

• Step 1: Click on the Edit Details icon.
• Step 2:
  Click on Reset Password, then select Ok. The system will send a new password to the registered email address.
  
  
  Use the new password to log in.

Delete Staff

Guide to Deleting Individual Staff

• Click on the Delete icon and Ok to delete the corresponding staff member.
  

Guide to Deleting Multiple Staff Members

• Step 1:
  Select the Checkbox icon for the staff members to be deleted, then click Delete.
  
• Step 2:
  Click Ok to confirm deletion of the selected staff members.
  

7/ Audio Management

List of Audios for Counters

On the main interface, select Audio.


Description of the list of counter audios:

(1) Counter Name
(2) Text: text used to generate the audio using AI.
If the text has formats like {{[VARIABLE]}}, for example: {{COUNTER_ID}}, {{NUMBER_ID}}, the audio cannot be generated using AI. When playing the counter's audio stream, it will be replaced with the corresponding audio value created by the system.
Example: with {{NUMBER_ID}}, it will be replaced by the audio of the current customer number generated in the Audio Configuration section of System Settings.
(3) Language: language of the audio selected during initialization.
(4) Audio: audio generated by AI or uploaded from a display. .

Create New Audio for Counter

Create AI-generated Audio

• Step 1:
  Click Add New on the counter to add a new audio.
  
• Step 2:
  1. Guide to creating audio with regular text:
  Enter audio information:
  
  Text Content: text to generate audio using AI.
  Language: choose the language for the audio, defaulting to Vietnamese (vi-VN-Wavenet-A) if not selected.
  
  Then select the Create Audio from AI Text icon.
  
  
  2. Guide to creating customized audio:
  To have the audio played as the customer or counter number, copy {{COUNTER_ID}} for counter code or {{NUMBER_ID}} for guests - customer number from the top of the page or directly enter in the Content box as required. Then select Save.
  

Upload Existing Audio

• Step 1:
  Click Add New on the counter to add a new audio.
  
• Step 2:
  Select the Upload icon to use an existing audio. Then choose the audio file from the display.
  

Customize Audio Stream Order

The audio stream for each counter will follow a top-down order. To change this order, follow these steps:

• Step 1:
  At the counter where you want to change the audio stream, drag each audio item up or down to the desired position in the counter's audio stream.
  
• Step 2:
  Select Save to save the new audio stream.
  

Delete Audio

Click the Delete icon at the audio you want to delete, then select Save to save the new audio stream.

Download Audio

Click the Download icon at the audio you want to download.

8/ Workflow Management

List of Workflows

On the main interface, select Workflow.


Description of workflow list:

(1): Workflow title.
(2): Counter name within the workflow.
(3): Display name used by the counter.
(4): Avatar of the main personnel at the counter.

Create New Workflow

• Step 1:
  Click Add Group to add a new workflow.
  
• Step 2:
  Enter the workflow details:
  
  Title: title of the workflow.
  Description: detailed description of the workflow.
  Ordinal: sequence of the workflow in the system, used to sort among workflows. Workflow order is equivalent to the system's workflow process.
  Status: workflow status; if disabled, the workflow will be skipped in the system's workflow process.
  
  Then select Add.
  

Add Counter to Workflow

• Step 1:
  Click Add Counter on the workflow where counters need to be added.
  
• Step 2:
  Select the counter to add to the workflow. Each counter belongs to only one workflow; if a counter already exists in another workflow, it will automatically be removed from the previous workflow.
  Then select Add to add the counter to the designated workflow.
  

Edit Workflow

• Step 1:
  Click Edit icon on the workflow to edit.
  
• Step 2:
  Enter workflow details similar to adding a new one, then select Update.
  

Customize Workflow Order

Workflows will be ordered based on the Title index. To change this order, follow these steps:
Drag and drop workflows to the desired position in the workflow, then select Save to save the new workflow.

Delete Workflow

Click the Delete icon on the workflow you want to delete, then select Ok to confirm deletion.

Remove Counter from Workflow

Click the Delete icon on the counter you want to remove from the workflow, then select Ok to confirm removal.

9/ Statistics

On the main interface, select Statistics.


Description of customer statistics list:

On the main page, you can perform the following actions:

(1) Filter by time range: filter the statistics list by a time range of up to 30 days, displaying time in the format set by the date-time settings.
(2) Export to Excel file: export statistical data to an Excel spreadsheet.

10/ Update personal information

Guide to updating personal information

• Step 1:
  On the main interface, hover over the avatar icon in the top right corner.
  Click on Information to go to the Personal Information page.
  
• Step 2:
  Enter the information to be updated in the Personal Information section:
  
  Staff code: Specifies the ID with a maximum of 10 characters in the format A-Z 0-9 and does not contain special characters.
  Full name: Full name of the staff.
  Phone number: Staff's phone number in numeric characters 0-9.
  Email: Staff's email in standard email format.
  Example: abc@gmail.com
  Position: Select the staff's position from the list.
  Birthday: Enter the staff's birthday, ensuring it does not exceed the current date and displaying it in the format set by date-time settings.
  Sex: Select the staff's sex.
  Address: Enter the staff's address.
  Avatar: Upload a avatar for the account, in standard image format, recommended size is 200x200 px to maintain a 1:1 aspect ratio for optimal display.
  
  Then click Save to save the personal information.
  

Guide to changing password

• Step 1:
  On the main interface, hover over the avatar icon in the top right corner.
  Click on Information to go to the Personal Information Management page.
  
• Step 2:
  To change your password, enter the information in the Change Password section:
  
  Current password: Enter the current password of the account.
  New password: Enter a new password, different from the current password and with a length of 6-256 characters.
  Confirm password: Re-enter the new password to confirm it matches the new password entered above.
  
  Then click Save to use the new password.
  

11/ System Settings

• Step 1:
  On the main interface, hover over the avatar icon in the top right corner.
  Click on Settings to go to the Settings page.
  
• Step 2: Here are the types of custom settings:
  
  General Settings: Customize the values of general parameters of the application.
  Enter the following setup information:
  
  Logo: Upload a photo in JPG, PNG format with a maximum size of 2Mb to make a logo for the application.
  Favicon: Upload a photo in JPG or PNG format with the recommended size of 32x32 to use as an icon in the left corner of the browser tab or in the bookmark list.
  App Name: Enter the name of the application.
  Version: Enter the updated version of the application.
  Date Format: Select the date format displayed by the application, applicable to displaying time across all categories.
  Email: Enter the system's email, following the standard email format.
  Example: abc@gmail.com
  Phone Number: Enter the system's phone number using numeric characters 0-9.
  Address: Enter the system's address.
  Language: Choose the display language for the entire application.
  Demo patients Mode: In JSON format, simulated data for testing the entire application flow.
  Demo accounts Mode: In JSON format, simulated data to log in to use the application.
  
  Then click Save.
  
  
  Colors and Typography: Customize the colors and fonts of the entire application.
  
  • Step 1:
    Select the Colors & Typography tab in the Settings screen.
    
  
  
  • Step 2:
    Select the values for the desired colors and fonts to display.
    Then click Save.
    
  Variable configuration: Customize the display format of displays such as customer information, time.
  
  • Step 1:
    Select the Variable configuration tab in the Settings screen.
    
  
  
  • Step 2:
    Select the desired format for each parameter (You can replace the field names in file variables.json in Frontend).
    
    Preview: main layout of the display after updating.
    Customer information format includes Order Number and Name in the {{WORKFLOW_DATA}} part of the Preview section.
    Time format includes {{DATE}} and {{TIME}} displayed in the Preview section.
    
    Then click Save.
    
  Audio Configuration: Configure the audio played for guests - customer queue numbers on displays.
  
  • Step 1:
    Select the Audio configuration tab in the Settings screen.
    
  
  
  • Step 2:
    Select the language and quantity for the audio you want to generate. The number of audios generated is equivalent to the queue numbers starting from 1.
    The audio generation progress (%) is displayed in the Progress Bar.
    
  
  
  • Step 3:
    
    Click Save to save the settings. If the audio has not been generated completely, the audio generation process will automatically proceed.
    Click Regenerate audio to always generate new audios according to the settings and save the settings.
    
    
  Configure Text-to-Speech Conversion: Select AI-supported text-to-speech services and configure the service settings.
  
  • Step 1:
    Select the Text to speech configuration tab in the Settings screen.
    
  
  
  • Step 2:
    Select the type of text-to-speech conversion service, click Save.
    Then, find and edit the configuration of the selected service in the credentials.json file in Backend
    
  Configure Notifications: Edit the list of notifications displayed on displays. The notifications will be displayed sequentially and repeatedly according to configured parameters. Each notification will be displayed in a fixed frame at the lower half of the display, moving from right to left and repeating within the set display time.
  
  Select Notifications tab in the Settings screen.
  
  
  Description of notifications list:
  
  Content: Display content of the notification.
  Font size: Font size of the notification content. Unit: pixel.
  Display time: Display duration of the notification. Unit: seconds.
  Delay time: Delay time after the display duration before the next notification is shown. Unit: seconds.
  Speed: Movement speed of the notification from right to left.
  
  Actions that can be performed here:
  
  Add new notification
  Select Add new to add a new notification line.
  Then enter the required notification information and press Save to save the list.
  
  
  Edit notification
  Enter the information in the notification line to be edited and select Save to save.
  
  
  Delete notification
  Select the Delete button at the notification line to be deleted and select Save to save.
  
  
  Preview notification display
  Select the Preview button. The list of notifications displayed on the Display will be described in the box below.
  
  
  Configure Services: Edit the list of clinic services and the print operations displayed on the ticketing screen.
  
  Select Services tab in the Settings screen.
  
  
  Description of services list:
  
  Code: Service code. The maximum length is 15 characters, including letters, numbers, hyphens, or underscores.
  Name: Service name.
  Next workflow: Option for the next counter to move to after taking a number at the service. If not selected, it will default to randomly move to one of the reception counters.
  Preview: Link for quick number taking at the service. Can be quickly copied using the Copy icon next to it.
  QR Code: Can click to preview and download QR Code to your device, use QR Code scanner to scan and quickly take a token number at the service.
  
  Actions that can be performed here:
  
  Add new service
  Select Add new to add a new service line.
  Then enter the required service information and press Save to save the list. After saving, the service code will automatically be converted to uppercase and remove all spaces.
  
  
  Edit service
  Enter the information in the service line to be edited and select Save to save.
  
  
  Delete service
  Select the Delete button at the service line to be deleted and select Save to save.
  
  
  Enable/disable print receipt option
  Select the Print receipt checkbox. When enabled, after each token number taking at Get Token Number screen, a preview dialog will automatically appear to print the receipt. The printed receipt includes the queue number, selected service name, and the counter to move to.
  Then select Save to save.
  
  
  Preview and Download QR Code
  • Step 1:
    Click on the QR Code you want to view and download.
    
  
  
  • Step 2:
    You can use the QR Code directly to scan or click Download to save the QR Code to your device as an image.
    You can use QR Code Scanner to scan and get the token number quickly.
    
  
  
  Print template: Customize the layout and content displayed on the print slip when successfully retrieving the token number at the ticketing screen.
  
  • Step 1:
    Select Print template tab in the Settings screen.
    
  
  
  • Step 2:
    Enter the following setup information:
    
    Custom fields value: The values of variables displayed in the print slip template (You can replace the field names in file variables.json in Frontend). If left empty, the default values will be as follows:
    {{CONTACT_INFO}}: Tel, E-mail, Address. These values are taken from General settings.
    {{FOOTER}}: Thank you for using our services. Wishing you good health!
    Template: Layout and content displayed in the print slip.
    The contents of the Print Template will be described in detail in the Preview section on the right.
    
    Then click Save.
    

Application Variables

Application variables help users customize the interface of the display more simply and conveniently. It allows users to select displayed elements, customize font size, font type, colors, layout, etc.
Below is information about the variables used (You can adjust them inside variables.json file in Frontend).

List of Variables

Patient Data API Integration

Guide on how to integrate the API for patient or customer data within the hospital's data.

1/ Backend

You need to develop a new API with a data structure for patients, ensuring the data structure for patient information returned and using search parameters similar to those in the Integrate with 3rd API mentioned in the Installation section.

2/ Frontend

You need to update the Endpoint (VITE_PATIENT_API_URL) information of the API in the .env file to connect to the new API.

FAQs

FAQs provide quick and convenient information for users. It helps address frequently asked questions that users are concerned about in a timely manner. Below is some information.