| Server IP : 14.225.204.176 / Your IP : 216.73.216.169 Web Server : nginx/1.24.0 System : Linux nodejs-ybgk 6.8.0-40-generic #40-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul 5 10:34:03 UTC 2024 x86_64 User : root ( 0) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/php/zinisoft.net/user-guide/coco/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="ZiniSoft Team" />
<!-- Stylesheets
============================================= -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800|Poppins:300,400,500,600,700,800,900"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- One Page Module Specific Stylesheet -->
<link rel="stylesheet" href="onepage.css" type="text/css" />
<!-- / -->
<!-- Documentation Module Specific Stylesheet -->
<link rel="stylesheet" href="docs.css" type="text/css" />
<!-- / -->
<link rel="icon" href="/frontend/public/images/favicon.png" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/et/et-line.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/medical/medical-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/real-estate/real-estate-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="one-page/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- Document Title
============================================= -->
<title>Documentation | CocoQMS - Queue Management System (Hospital/Clinic/Bank)</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="static-sticky">
<div id="header-wrap">
<div class="container-fullwidth clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="/" class="standard-logo">CocoQMS - Queue Management System (Hospital/Clinic/Bank)</a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap nopadding">
<div id="docs" class="container-fullwidth clearfix">
<div class="docs-navigation">
<ul>
<li><a href="#docs-start">Installation</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-start-introduction">Introduction</a></li>
<li><a href="#" data-href="#docs-start-requirements">Requirements</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-install-on-windows">Installing
services on Windows</a></li>
<li><a href="#" data-href="#docs-userguide-install-on-linux">Installing
services on Linux</a>
</li>
</ul>
</li>
<li><a href="#" data-href="#docs-start-installation">Configure Source Code</a></li>
<li><a href="#" data-href="#docs-start-one-click-installation">One Click
Installation</a>
</li>
<li><a href="#" data-href="#docs-start-integrated">Integrate with 3rd API</a></li>
<li><a href="#" data-href="#docs-start-texttospeech">Google Text-to-Speech API</a>
</li>
<li><a href="#" data-href="#docs-start-deployment">Deployment</a></li>
</ul>
</li>
<li><a href="#docs-userguide-customer">User guide (For Guest - Customer)</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-ticket">Get Token Number</a></li>
<li><a href="#" data-href="#docs-userguide-qrcode-scanner">QR Code Scanner</a>
</ul>
</ul>
</li>
<li><a href="#docs-userguide-staff">User guide (For Staff)</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-reception-screen">Counter 1
(Reception screen)</a></li>
<li><a href="#" data-href="#docs-userguide-cashier-screen">Counter 2 (Cashier
screen)</a>
</li>
<li><a href="#" data-href="#docs-userguide-doctor-screen">Counter 3 (Doctor
screen)</a></li>
<li><a href="#" data-href="#docs-userguide-pharmacist-screen">Counter 4
(Pharmacist screen)</a></li>
</ul>
</ul>
</li>
<li><a href="#docs-userguide-admin">User guide (For Admin)</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-login">Login</a></li>
<li><a href="#" data-href="#docs-userguide-forgot-password">Forgot password</a>
</li>
<li><a href="#" data-href="#docs-userguide-overview">Overview</a></li>
<li><a href="#" data-href="#docs-userguide-create-counter">Counter
management</a></li>
<li><a href="#" data-href="#docs-userguide-create-display">Display
management</a>
</li>
<li><a href="#" data-href="#docs-userguide-create-staff">Staff management</a>
</li>
<li><a href="#" data-href="#docs-userguide-create-audio">Audio management</a>
</li>
<li><a href="#" data-href="#docs-userguide-create-workflow">Workflow
management</a></li>
<li><a href="#" data-href="#docs-userguide-statistics">Statistics</a></li>
<li><a href="#" data-href="#docs-userguide-update-information">Update personal
information</a></li>
<li><a href="#" data-href="#docs-userguide-setting">System settings</a></li>
</li>
</ul>
</ul>
</li>
<li><a href="#docs-app-variables">App variables</a></li>
<li><a href="#docs-api-integration">Patient Data API Integration</a></li>
<li><a href="#docs-faqs">FAQs</a></li>
</ul>
</div>
<div class="docs-content">
<!-- INTRODUCTION -->
<div id="docs-start">
<div id="docs-start-introduction" class="docs-content-inner page-section">
<h1>Coco Queue Management System Software for Hospital (Queue Management System).</h1>
<div>
<span class="special-label">Version 1.0</span> <span class="special-label">Last
Documentation Update - 29/07/2024</span>
</div>
<!-- <div class="row special-row">
<div class="col-md-6">
<img src="images/backend/banner-guest.png" style="border:1px solid #22376F;">
</div>
<br class="col-md-6">
<h3>Welcome</h3>
<a target="_blank" href="https://cocoqms.test.zinisoft.net/"
target="_blank">CocoQMS</a> is
a software for managing medical examination and taking the order number for
patients, used with kiosk to get the order number, receptionist and choose the
clinic.
<br>The doctor associated with the hospital's HIS software available via the API
provided.</p>
<h5>Author: <a target="_blank" href="https://codecanyon.net/user/zinisoft"
target="_blank">ZiniSoft Team</a></h5>
</div>
<h5>Demo:</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Guest - Customer get <b>Ticket (Token number)</b>
<br>
<a target="_blank" href="https://cocoqms.test.zinisoft.net/"
target="_blank">Link demo</a>
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
<b>Token number</b> will be displayed on display of the counter
<br>
</li>
<li class="special-li"><span class="special-span">Step 3:</span>
<br>
<b>Receptionist</b> logins to manage reception counter
<br>
<a target="_blank" href="https://cocoqms.test.zinisoft.net/login"
target="_blank">Link demo</a>
<br>
<b>Account:</b>
<br><b>E-mail:</b> reception@gmail.com
<br><b>Password:</b> 123456
</li>
</ul> -->
<div class="row special-row d-flex align-items-start">
<div class="col-md-6">
<img src="images/backend/banner-guest.png"
style="border:1px solid #22376F; width: 100%;">
</div>
<div class="col-md-6">
<h3>Welcome</h3>
<p>
<a target="_blank" href="https://cocoqms.test.zinisoft.net/">CocoQMS</a> is
a
software for managing medical
examination and taking the order number for patients, used with kiosk to get
the
order number, receptionist,
and choose the clinic.<br>The doctor associated with the hospital's HIS
software
available via the API
provided.
</p>
<h5>Author:
<a target="_blank" href="https://codecanyon.net/user/zinisoft">ZiniSoft
Team</a>
</h5>
<h5>Demo:</h5>
<ul style="margin-top: 0; margin-left: 16px">
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>Guest - Customer get <b>Ticket (Token number)</b>
(<a target="_blank" href="https://cocoqms.test.zinisoft.net/ticket">Link
demo</a>)
</li>
<li class="special-li">
<span class="special-span">Step 2:</span>
<br><b>Token number</b> will be displayed on display of the counter
(<a target="_blank"
href="https://cocoqms.test.zinisoft.net/device/view/device001">Link
demo</a>)
</li>
<li class="special-li">
<span class="special-span">Step 3:</span>
<br><b>Receptionist</b> logins to manage reception counter
(<a target="_blank" href="https://cocoqms.test.zinisoft.net/login">Link
demo</a>)
<br><b>Account:</b>
<br><b>E-mail:</b> reception@gmail.com
<br><b>Password:</b> 123456
</li>
</ul>
</div>
</div>
</div>
<div class="line"></div>
<div id="docs-start-requirements" class="docs-content-inner page-section">
<h1>Requirements</h1>
<h4>Operating system: support for Windows + Linux.</h4>
<p>Services need to install:<br />
Web service: <strong>NodeJS</strong>: <a
href="https://nodejs.org/en/download">Download</a><br />
Database: <strong>MongoDB</strong>: <a
href="https://www.mongodb.com/try/download/community">Download</a><br />
Mail server: <strong>Mailgun</strong>: <a
href="https://login.mailgun.com/login/">https://login.mailgun.com/login/</a><br />
<strong>Google Speech to Text</strong>: <a
href="https://cloud.google.com/?hl=en">https://cloud.google.com/?hl=en</a><br />
<strong>OS</strong>: Windows 10, Windows 11 or Windows Server 2018 or higher.<br />
</p>
<div id="docs-userguide-install-on-windows" class="docs-content-inner page-section">
<h4><strong>A. Installing services on Windows:</strong></h4>
<p>
<strong>A-1. Install Web sevices Node.js</strong> <br />
Visit the official website of Node.js at <a target="_blank"
href="https://nodejs.org">https://nodejs.org</a>. <br />
Download Node.js settings for Windows. <br />
<img src="images/backend/win/download_node.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. Click "Next" to
install.<br />
<img src="images/backend/win/install_node.png" width="1000"> <br />
Follow the instructions in the installation process. Make sure you select the
"Add
to Path" option to facilitate the use of Node.js in Command Prompt. <br />
<img src="images/backend/win/path_node.png" width="1000"> <br /><br />
Check the Node.js version was installed with Command Prompt or PowerShell:
<br />
<strong>$ node --version </strong><br />
<strong>$ npm --version </strong><br />
<img src="images/backend/win/node_version.png" width="1000"> <br /><br />
Next step is to install "forever" using the following command:<br />
<strong>$ npm install forever -g</strong><br />
<img src="images/backend/win/install_forever.png" width="1000"> <br />
<br>Check "forever" version: <br />
<strong>$ forever --version</strong><br />
<img src="images/backend/win/forever_version.png" width="1000"> <br />
<br>Now, once "forever" is installed, we are ready to run
application.<br /><br /><br />
<strong>A-2. Install database MongoDB</strong>:
(Reference more on their offical web: <a target="_blank"
href="https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows">https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows</a>)<br />
Download the MongoDB Community .msi installer from the following link: <a
target="_blank"
href="https://www.mongodb.com/try/download/community?tck=docs_server">MongoDB
Download Center</a><br />
Select the MongoDB version that is suitable for your Windows operating system
and
click the "Download" button to download the installer. <br />
<img src="images/backend/win/download_mongo.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. <br />
Select "Complete" when asked to install. <br />
<img src="images/backend/win/open_msi_mongo.png" width="1000"> <br /><br />
Make sure you choose the <strong>Install MongoDB as a Service</strong> option
to
automatically run
as a Windows service. <br />
<img src="images/backend/win/mongo_config.png" width="1000"><br />
You can also choose <strong>Install MongoDB Compass</strong> if you want to
install MongoDB
Compass, a GUI tool to manage MongoDB.
<img src="images/backend/win/mongo_compass.png" width="1000"><br />
Configure path: <br />
Open <b>Start Menu</b> and search <strong>Advanced System Settings</strong> and
then click the
<b>Environment Variables</b> button.
<br />
<img src="images/backend/win/env_variable.png" width="1000"> <br /><br />
In the <strong>System Variables</strong> section, find and select the "path"
variable, then click
the "Edit" button. <br />
<img src="images/backend/win/edit_path.png" width="1000"> <br /><br />
Add the path to the bin folder of MongoDB (the default is C:\Program
Files\Mongodb\Server\{Version}\bin), and click "OK". <br />
<img src="images/backend/win/path_mongo.png" width="1000"> <br /><br />
Start MongoDB: <br />
If you have chosen MongoDB settings as a service, it will automatically run
after
installation. <br />
If you do not install MongoDB as a service, you can boot it by opening Command
Prompt and running the following command: <br />
<strong>$ mongod </strong> <br /><br />
<img src="images/backend/win/start_mongo_cmd.png" width="1000"> <br />
<br />
Install <strong>Mongo Shell</strong>: <a target="_blank" href="https://www.mongodb.com/try/download/shell">https://www.mongodb.com/try/download/shell</a> <br />
Select the version that is suitable for your Windows operating system and click the "Download" button to download the installer. <br />
<img src="images/backend/win/download_mongo_shell.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. <br />
<img src="images/backend/win/install_mongo_shell.png" width="1000"> <br />
Copy the folder path to add to environmental variables. Then click "Next" and "Install" to complete the installation. <br />
Add the path to the bin folder of MongoDB (the default is C:\Users\Admin\AppData\Local\Programs\mongosh), and click "OK". <br />
<img src="images/backend/win/path_mongo_shell.png" width="1000"> <br />
Check the Mongo Shell was installed with Command Prompt or PowerShell: <br />
<strong>$ mongosh </strong> <br /><br />
<img src="images/backend/win/check_mongo_shell.png" width="1000"> <br /><br />
* Note: After installation, MongoDB runs in unauthenticated mode, that is, you can connect without a username/password. MongoDB default uses port 27017. <br />
To change the default port of MongoDB, you need to edit the configuration file of MongoDB. <br />
The configuration file is usually mongod.cfg, located in the MongoDB installation directory, for example: <strong>C:\Program Files\MongoDB\Server\<version>\bin\mongod.cfg</strong>. <br />
<img src="images/backend/win/mongo_cfg.png" width="1000"> <br />
Open the file with notepad or other text editing process (with Administrator). <br />
Find the line containing <strong>port</strong>: (usually in the net :) and change the port value. For example: 27017 -> 2817. <br />
<img src="images/backend/win/change_port_mongo.png" width="1000"> <br /><br />
After saving the changes, open Command Prompt or PowerShell (with Administrator) and restart the MongoDB service: <br />
<strong>$ net stop MongoDB </strong> <br />
<strong>$ net start MongoDB </strong> <br />
<img src="images/backend/win/restart_mongo.png" width="1000"> <br /><br />
To configure authentication, you need to turn on authentication and create administrative accounts. <br />
Create administrative accounts with Command Prompt or PowerShell: <br />
Connect to MongoDB: <br />
<strong>$ mongosh </strong> <br />
Switch to administrative databases: <br />
<strong>$ use admin </strong> <br />
Create a user with administrative privileges. For example: user = "admin_user" and password ="admin_password". <br />
<strong>$ db.createUser({ user: "admin_user", pwd: "admin_password", roles: [ { role: "root", db: "admin" } ] }) </strong> <br />
Exit from MongoDB: <br />
<strong>$ exit </strong> <br />
<img src="images/backend/win/account_admin_mongo.png" width="1000"> <br /><br />
Find the line containing <strong>security</strong> in mongod.cfg file and add the following code: <br />
<strong> security: authorization: enabled </strong> <br />
<img src="images/backend/win/security_mongo.png" width="1000"> <br />
After saving the changes, restart the MongoDB service: <br />
<strong>$ net stop MongoDB </strong> <br />
<strong>$ net start MongoDB </strong> <br />
Reconnect to MongoDB with the admin account to check the authentication configuration. <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> <br />
<img src="images/backend/win/check_account_admin_mongo.png" width="1000"> <br /><br />
Check the list of administrative users: <br />
<strong>$ use admin </strong> <br />
<strong>$ show users </strong> <br />
<img src="images/backend/win/show_users_mongo.png" width="1000"> <br /><br />
To create a new database (for example, the database name is <strong>qms_db</strong>), you can follow these steps: <br />
Open Command Prompt or PowerShell and connect to MongoDB: <br />
<strong>$ mongosh </strong> (unauthenticated mode) <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> (authenticated mode)<br />
MongoDB automatically creates a database when you perform the first insert. <br />
<strong>$ use qms_db </strong> <br />
Replace <strong>qms_db</strong> with the database name you want to create. <br />
MongoDB only really creates a database when data is stored in it. You need to insert at least one document into a collection.
<strong>$ db.myCollection.insertOne({ name: "Sample data" }) </strong> <br />
MyCollection is the name collection you want to create. <br />
Document {Name: "Sample data"} is a sample data. <br />
Check the list of collections in the database: <br />
<strong>$ show collections </strong> <br />
<img src="images/backend/win/create_database.png" width="1000"> <br />
If authenticated mode, you need create administrative accounts for database qms_db. <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> <br />
<strong>$ use qms_db </strong> <br />
<strong>$ db.createUser({user: "qms_user", pwd: "qms_password", roles: [{ role: "dbOwner", db: "qms_db" }]}) </strong> <br />
View the user list in the database: <br />
<strong>$ db.getUsers() </strong> <br />
<strong>$ exit </strong> <br />
<img src="images/backend/win/account_database.png" width="1000"> <br /><br />
After the account is created, you can log in to the database qms_db with a new account: <br />
<strong>$ mongosh -u qms_user -p qms_password --authenticationDatabase qms_db </strong> <br />
<img src="images/backend/win/check_account_database_mongo.png" width="1000"> <br /><br />
Check the list of all databases of qms_user account: <br />
<strong>$ show dbs </strong> <br />
<img src="images/backend/win/show_dbs.png" width="1000"> <br />
</p>
<br />
<hr />
<br />
</div>
<div id="docs-userguide-install-on-linux" class="docs-content-inner page-section">
<h4><strong>B. Installing services on Linux:</strong></h4>
<p>
If you are using hosting: They will provide you all the credentials to access:
FTP
and Database account.<br />
If you are using VPS (Ubuntu 22.x Recommended): Login to SSH server and
install:<br />
- <strong>B. Install Nginx</strong>: Reference: <a target="_blank"
href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04</a><br />
System update: <br />
<strong>$ sudo apt update </strong> <br />
<img src="images/backend/linux/apt_update.png" alt=""><br /><br />
<strong>$ sudo apt upgrade</strong> <br />
<img src="images/backend/linux/apt_upgrade.png" alt=""><br /><br />
Install Nginx: <br />
<strong>$ sudo apt install nginx</strong> <br />
<img src="images/backend/linux/install_nginx.png" alt=""><br /><br />
Start and activate Nginx: <br />
<strong>$ sudo systemctl start nginx</strong> <br />
<strong>$ sudo systemctl enable nginx</strong> <br />
<img src="images/backend/linux/start_nginx.png" alt=""><br /><br />
Check the status of Nginx: <br />
<strong>$ sudo systemctl status nginx </strong> <br />
<img src="images/backend/linux/nginx_active.png" alt=""> <br /><br />
- <strong>Install MongoDB</strong>: Reference: <a target="_blank"
href="https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/">https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/</a><br />
Import the public key used by the package management system: <br />
<strong>$ sudo apt-get install gnupg curl </strong> <br />
<img src="images/backend/linux/install_curl.png" width="1000"> <br /><br />
<strong>$ curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | \
sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg \
--dearmor</strong>
<img src="images/backend/linux/GPG_key.png" width="1000"> <br /><br />
Create a list file for MongoDB: <br />
<strong>$ echo "deb [ arch=amd64,arm64
signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ]
https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | sudo
tee
/etc/apt/sources.list.d/mongodb-org-7.0.list </strong> <br />
<img src="images/backend/linux/echo_deb.png" width="1000"><br />
Reload local package database: <br />
<strong>$ sudo apt-get update </strong> <br />
<img src="images/backend/linux/apt_get_update.png" width="1000"> <br /><br />
Install the MongoDB packages: <br />
<strong>$ sudo apt-get install -y mongodb-org </strong> <br />
<img src="images/backend/linux/install_mongo.png" width="1000"> <br /><br />
Start and activate MongoDB: <br />
<strong>$ sudo systemctl start mongod </strong> <br />
<strong>$ sudo systemctl enable mongod </strong> <br />
<img src="images/backend/linux/start_mongo.png" width="1000">
Check MongoDB status: <br />
<strong>$ sudo systemctl status mongod </strong> <br /><br />
<img src="images/backend/linux/status_mongo.png" width="1000">
<br /><br />
* Note: After installation, MongoDB runs in unauthenticated mode, that is, you can connect without a username/password. MongoDB default uses port 27017. <br />
To change the default port of MongoDB, you need to edit the configuration file of MongoDB. <br />
<strong>$ sudo nano /etc/mongod.conf </strong> <br />
Find the line containing <strong>port</strong>: (usually in the net :) and change the port value. For example: 27017 -> 2817. <br />
<img src="images/backend/linux/change_port_mongo.png" width="1000"> <br />
After saving the changes, restart the MongoDB service: <br />
<strong>$ sudo systemctl restart mongod </strong> <br />
To configure authentication, you need to turn on authentication and create administrative accounts. <br />
Create administrative accounts with Command Prompt or PowerShell: <br />
Connect to MongoDB: <br />
<strong>$ mongosh </strong> <br />
Switch to administrative databases: <br />
<strong>$ use admin </strong> <br />
Create a user with administrative privileges. For example: user = "admin_user" and password ="admin_password". <br />
<strong>$ db.createUser({ user: "admin_user", pwd: "admin_password", roles: [ { role: "root", db: "admin" } ] }) </strong> <br />
Exit from MongoDB: <br />
<strong>$ exit </strong> <br />
<img src="images/backend/linux/account_admin_mongo.png" width="1000"> <br /><br />
Find the line containing <strong>security</strong> in /etc/mongod.conf file and add the following code: <br />
<strong> security: authorization: enabled </strong> <br />
<img src="images/backend/linux/security_mongo.png" width="1000"> <br /><br />
After saving the changes, restart the MongoDB service: <br />
<strong>$ sudo systemctl restart mongod </strong> <br />
Reconnect to MongoDB with the admin account to check the authentication configuration. <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> <br />
<img src="images/backend/linux/check_account_admin_mongo.png" width="1000"> <br />
Check the list of administrative users: <br />
<strong>$ use admin </strong> <br />
<strong>$ show users </strong> <br />
<img src="images/backend/linux/show_users_mongo.png" width="1000"> <br />
To create a new database (for example, the database name is <strong>qms_db</strong>), you can follow these steps: <br />
Open Command Prompt or PowerShell and connect to MongoDB: <br />
<strong>$ mongosh </strong> (unauthenticated mode) <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> (authenticated mode)<br />
MongoDB automatically creates a database when you perform the first insert. <br />
<strong>$ use qms_db </strong> <br />
Replace <strong>qms_db</strong> with the database name you want to create. <br />
MongoDB only really creates a database when data is stored in it. You need to insert at least one document into a collection.
<strong>$ db.myCollection.insertOne({ name: "Sample data" }) </strong> <br />
MyCollection is the name collection you want to create. <br />
Document {Name: "Sample data"} is a sample data. <br />
Check the list of collections in the database: <br />
<strong>$ show collections </strong> <br />
<img src="images/backend/linux/create_database.png" width="1000"> <br /><br />
If authenticated mode, you need create administrative accounts for database qms_db. <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> <br />
<strong>$ use qms_db </strong> <br />
<strong>$ db.createUser({user: "qms_user", pwd: "qms_password", roles: [{ role: "dbOwner", db: "qms_db" }]}) </strong> <br />
View the user list in the database: <br />
<strong>$ db.getUsers() </strong> <br />
<strong>$ exit </strong> <br />
<img src="images/backend/linux/account_database.png" width="1000"> <br /><br />
After the account is created, you can log in to the database qms_db with a new account: <br />
<strong>$ mongosh -u qms_user -p qms_password --authenticationDatabase qms_db </strong> <br />
<img src="images/backend/linux/check_account_database_mongo.png" width="1000"> <br /><br />
Check the list of all databases of qms_user account: <br />
<strong>$ show dbs </strong> <br />
<img src="images/backend/linux/show_dbs.png" width="1000"> <br />
<br />
- <strong>Install Node.js</strong>: Reference: <a target="_blank"
href="https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04</a><br />
Add Nodesource repository: <br />
<strong>$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
</strong> <br />
<img src="images/backend/linux/nodesoure.png" width="1000"> <br /><br />
* Replace 18.x with the Node.js version you want to install. <br />
Install Node.js: <br />
<strong>$ sudo apt-get install -y nodejs </strong> <br />
<img src="images/backend/linux/install_nodejs.png" width="1000"> <br /><br />
Check Node.js version: <br />
<strong>$ node --version</strong> <br />
<strong>$ npm --version</strong>
<img src="images/backend/linux/node_version.png" width="1000"> <br /><br />
Next step is to install "forever" using the following command:<br />
<strong>$ sudo npm install forever -g</strong><br />
<img src="images/backend/linux/install_forever.png" alt=""> <br />
Check "forever" version: <br />
<strong>$ sudo forever --version</strong><br />
<img src="images/backend/linux/forever_version.png" width="1000"> <br /><br />
Now, once "forever" is installed your server, we are ready to run our
application.<br />
</p>
</div>
</div>
<div class="line"></div>
<div id="docs-start-installation" class="docs-content-inner page-section">
<h1>Configure Source Code</h1>
<p>This is a general installation overview of the script.<br />
Follow the steps as explained, and you will complete the installation process.</p>
<strong>A. SOURCE CODE CONFIG </strong><br /><br />
Open file <strong>.env.example</strong> and rename to <strong>.env</strong> located
inside script folder.<br />
* Replace "" with your database username, password and database name. <br />
- If you have not turned on the authentication on MongoDB, you do not need to provide username and password. <br />
<strong>MONGO_USER=""</strong><br />
<strong>MONGO_PASSWORD=""</strong><br />
<strong>MONGO_DB_NAME="qms_db"</strong><br />
- If you have turned on authentication on MongoDB, you need to provide username and password. <br />
You can review the list of user management with the following commands: <br />
<strong>$ mongosh -u admin_user -p admin_password --authenticationDatabase admin </strong> <br />
<strong>$ use qms_db </strong> <br />
<strong>$ show users </strong> <br />
Example: username = "qms_user" and password = "qms_password" <br />
<strong>MONGO_USER="qms_user"</strong><br />
<strong>MONGO_PASSWORD="qms_password"</strong><br />
<strong>MONGO_DB_NAME="qms_db"</strong><br /><br />
* Replace your url and port. <br />
By default, the Sails.js application will run at port 1337 and url is http: // localhost: 1337. <br />
<strong>SAILS_PORT=1337</strong><br />
<strong>SAILS_BASE_URL="http://localhost:1337"</strong><br /><br />
* Replace "" with your maigun credentials you have when register on Mailgun. <br />
<strong>MAIL_AUTH_USER="no-reply@yourdomain.com"</strong><br />
<strong>MAIL_AUTH_PASSWORD="xxx"</strong><br />
<strong>MAIL_AUTH_HOST="smtp.eu.mailgun.org"</strong><br />
<strong>MAIL_AUTH_PORT="587"</strong><br />
<strong>MAIL_FROM="no-reply@yourdomain.com"</strong><br />
<img src="images/backend/env_config.png" width="1000"> <br />
* If you need to send / received email, we support Mailgun service, please replace all
the credentials above by your Mailgun server config. Reference: <a target="_blank"
href="https://documentation.mailgun.com/">https://documentation.mailgun.com/</a>
<br /><br />
<strong>Then Upload all files/folders located inside "script" folder to your
server.</strong><br /><br />
</div>
<div class="line"></div>
<div id="docs-start-one-click-installation" class="docs-content-inner page-section">
<h3>One Click Installation (Web App)</h3>
<br>
- Ensure that <b>Node.JS, MongoDB</b> is installed on your computer.<br>
- Ensure that <b>Web server API</b> is started. (Backend API)<br>
- Ensure that <b>HTTP server </b> is started. (Frontend)<br>
<br>
<h4 style="margin-bottom: 0;">A- Run the Web server API.</h4>
Login to your server and go to source code folder:<br />
<strong>$ cd /path/to/qms/</strong> <br />
<b class="text-danger">Note: You MUST go to working folder contains source code before
run script.</b><br />
Before run application, you need to install all the dependencies below: <br />
<strong>$ npm install -g sails</strong> - <b class="text-danger">Required to run API
server App</b><br />
<strong>$ npm install -g forever</strong> - <b class="text-danger">Required to run
forever on production</b><br />
<strong>$ npm install -g serve</strong> - <b class="text-danger">Required to run HTTP
server for frontend app</b><br />
<strong>$ npm install</strong><br />
<img src="images/backend/install_sails.png" width="1000"> <br />
<br>To start our application, run the following command:<br />
<strong>$ sails lift</strong><br />
<img src="images/backend/start_sails.png" width="1000"> <br />
Now your node server is running on PORT 1337.<br />
To stop our application, press <strong>CTRL+ C</strong> <br /><br />
<b class="text-danger">** Note: CocoQMS build on Sails JS Framework, so if you need
further
information how to config advanced, reference: <a target="_blank"
href="https://sailsjs.com/get-started">https://sailsjs.com/get-started</a></b><br />
<b class="text-danger">If you need to run forever on production enviroment, run the
following command using "forever":</b> <strong>$ forever start app.js</strong><br />
<img src="images/backend/start_forever.png" width="1000"> <br />
<h4 style="margin-bottom: 0;">B- Run the HTTP server frontend.</h4>
<strong>$ cd /path/to/qms/<span class="text-danger">frontend</span></strong> <br />
<b>serve -s dist</b> to run the application.
<br>The default port for running the application will be <b>3000</b>. You can customize
it by adding the parameter
<b>-l [YOUR_PORT]</b>.
<br><b>Example: </b> to run the application on port <b>4000</b>, use the command
<b>serve -s dist -l 4000</b>.<br />
<img src="images/user-guide/run-serve.png" class="special-img-w-700">
<br><br>
<h4 style="margin-bottom: 0;">C- One Click Installation</h4>
After starting both the web server API and the HTTP server frontend, go to
<b>http://localhost:3000/installation</b> to set up the initial data.
<br>
<img src="images/user-guide/installation-view.png" class="special-img-w-700">
<br><br>
<div class="docs-custom-list">
<b>App Name:</b> Enter the name of the application.
</div>
<div class="docs-custom-list">
<b>Full Name:</b> Full name of the administrator account.
</div>
<div class="docs-custom-list">
<b>Email:</b> Email address of of the administrator account.
</div>
<div class="docs-custom-list">
<b>Password:</b> Enter the account password, length from 6 - 256 characters.
</div>
<div class="docs-custom-list">
<b>Confirm Password:</b> Re-enter the password, must match the previously entered
password.
</div>
<div class="docs-custom-list">
<b>Install test data:</b> If checked, the system will automatically install
sample data for some modules, including data for demo modes. If unchecked, you will
need to create data manually to start using the application.
</div>
<br>
Here you can perform the following steps to quickly install the application:
<br>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span> Enter the required
information, then select <b>Install</b> to install.
<br>
<img src="images/user-guide/installation-setting.png" class="special-img-w-700">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
Choose <b>Log in</b> to go to the Login page. Use your previously registered
account to log in.
<br>
<img src="images/user-guide/installation-confirmation.png"
class="special-img-w-700">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-start-integrated" class="docs-content-inner page-section">
<h1>Integrate with 3rd API</h1>
<p>
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.<br />
Replace our API with your API. The returned data format should be JSON. For example:
</p>
<img src="images/backend/patient_data_en.png" width="1000"> <br /><br />
<p>
The attributes of data: <br>
- patient_id: Patient code.<br>
- fullname: Full name.<br>
- address: Address.<br>
</p>
<p>
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.
<br />For example, as shown above: keyword=Angel
<br /><br />
You can also refer to our Postman collection by importing
<b>`CocoQMS.postman_collection.json`</b> from the <b>"postman"</b> folder.
</p>
</div>
<div class="line"></div>
<div id="docs-start-texttospeech" class="docs-content-inner page-section">
<h1>Google Text-to-Speech API</h1>
<p>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.
<br />For ex: After the patient presses GET NUMBER, the TV screen will play a sound:
<b class="text-danger">`Customers with number [NUMBER_ID], please proceed to counter
number [COUNTER_CODE]`</b>.
<br />With [NUMBER_ID] and [COUNTER_CODE] as variables, we can configure any sound
to support.
<br><b>Refer more as: USER GUIDE > Audio Management</b>
<br><b class="text-danger">** Note: You can also upload your own voice instead of
using the Google Text-to-Speech service AI.</b>
</p>
<p>
<strong> Create Google Cloud account: </strong> <br>
Visit Google Cloud Platform at <a
href="https://cloud.google.com">https://cloud.google.com</a>. <br>
If you do not have a Google Cloud account, register your account. And then click
"Console" to go to the dashboard page. <br>
<img src="images/backend/google/google_cloud.png" width="1000"> <br /><br />
<strong>Create a new project:</strong> <br>
After logging into Google Cloud Platform, click the drop -down menu in the upper
left corner and select "New Project". <br>
<img src="images/backend/google/new_project.png" width="1000"> <br /><br />
Fill in the project name and select the location (if necessary), then click
"Create". <br>
<img src="images/backend/google/create_project.png" width="1000"> <br /><br />
<strong>Activate Google Text-to-Speech API:</strong> <br>
In your project management page, click the menu "Apis & Services"> "Library". <br>
Search "Text-to-Speech API" and click it. <br>
<img src="images/backend/google/search_tts.png" width="1000"> <br /><br />
Click the "Enable" button to activate the API. <br>
<img src="images/backend/google/enable_tts.png" width="1000"> <br /><br />
<strong>Create authentication API Key:</strong> <br>
In "Enabled APIs & Services" > "Credentials", click "Create Credentials" and select
"Service account". <br>
<img src="images/backend/google/service_account.png" width="1000">
<br /><br /><br />
Fill in the service account name, service account ID and then click "Create and
continue".
<img src="images/backend/google/service_account_detail.png" width="1000">
<br /><br />
Select a role (optional) and then click "Continue".
<img src="images/backend/google/service_account_access.png" width="1000">
<br /><br />
Click "Done" to complete.
<img src="images/backend/google/service_account_grant.png" width="1000">
<br /><br />
Click the email you created.
<img src="images/backend/google/choose_service_account.png" width="1000">
<br /><br />
In "Keys", click "Add key" and select "Create new key"
<img src="images/backend/google/tab_keys.png" width="1000"> <br /><br />
Choose key type is JSON and click "Create". <br>
<img src="images/backend/google/create_private_key.png" width="1000"> <br /><br />
Google will create a private key and save it to your computer. <br>
<img src="images/backend/google/save_private_key.png" width="1000"> <br /><br />
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. <br>
<img src="images/backend/google/open_file_json.png" width="1000"> <br /><br />
<img src="images/backend/google/rename_credentials.png" width="1000"> <br /><br />
<img src="images/backend/google/private_key_example.png" width="1000"> <br /><br />
</p>
</div>
<div class="line"></div>
<div id="docs-start-deployment" class="docs-content-inner page-section">
<h1>Deployment</h1>
<p>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: <a
href="https://dev.to/sumitkharche/how-to-deploy-react-application-on-iis-server-1ied">Deploy
React application</a></p>
<p>
<h2>Run the application on Linux:</h2>
<strong>Config Nginx file: </strong> <br>
You need 1 domain to configure: for ex: queuedemo.com (website) and api.queuedemo.com
(api). <br>
Download the sample file here: <a href="sampleFile/sample-api.conf">sample-api.conf</a>
and <a href="sampleFile/sample.conf">sample.conf</a> . <br>
<br><strong> With API domain: </strong> <br>
Replace the demo API domain name with your API domain name.<br>
Replace path to script folder with your path to script folder.<br>
Replace port with your port.<br>
<img src="images/backend/sample_api_config.png" width="1000"> <br /><br />
<strong> With website domain: </strong> <br>
Replace the demo website domain name with your website domain name.<br>
Replace path to script folder with your path to script folder.<br>
<img src="images/backend/sample_config.png" width="1000"> <br /><br />
Ensure that the Nginx configuration file works with the API domain and the main
website domain.<br />
$ service nginx restart
<br>
Visit the domain name on the browser to check.
</p>
</div>
</div>
<!-- END INTRODUCTION -->
<!-- USER GUIDE FOR GUEST - CUSTOMER -->
<div id="docs-userguide-customer">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>Customer Process Guide</h2>
<p>Below is the basic process for guests - customers coming for medical treatment:</p>
</div>
<img src="images/user-guide/overview-guide.jpg" class="special-img-w-700">
<br>
<br>
<div id="docs-userguide-customer-overview" class="docs-content-inner page-section">
<span class="special-span">Step 1: </span>The customer arrives at the reception desk or
uses their phone to scan the QR code and get a queue number.
<br>
<span class="special-span">Step 2: </span>The customer waits for their turn.
<br>
<span class="special-span">Step 3: </span>The screen displays the queue number, and the
customer moves to the counter when called.
<br>
<span class="special-span">Step 4: </span>The staff serves and directs the customer to
the next counter if needed. Repeat from <b>Step 3</b>.
<br>
<span class="special-span">Step 5: </span>Finish and leave.
</div>
<div class="line"></div>
<!-- 1/ Get Token Number -->
<div id="docs-userguide-ticket" class="docs-content-inner page-section">
<h3>1/ Get Token Number</h3>
<h4 style="margin-bottom: 0;">Guideline to Get Token Number from Kiosk Device (Admin
setup)</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Visit the page to get the token number
via the URL <b>[YOUR_DOMAIN]/ticket</b>.
We provide a domain for testing token number
retrieval.
<a target="_blank" href="https://cocoqms.test.zinisoft.net/ticket"><u>Refer
here</u></a>.
<br>
<img src="images/user-guide/ticket-screen.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Select one of the displayed services to get the token number for the
corresponding service.
<br>
<img src="images/user-guide/ticket-screen-2.png" class="special-img">
<br>
<br>
If there is a <b>Print</b> icon in the upper right corner of the services, a
print dialog box will automatically appear after successfully getting the
token number.
<br>
You can print the ticket using the usual steps.
<br>
If you want the application to
<b>automatically print</b> each time the token number is successfully retrieved,
refer
to the <b>FAQs</b>.
<img src="images/user-guide/ticket-print.png" class="special-img">
<br>
<br>
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.
<br>
<img src="images/user-guide/ticket-screen-3.png" class="special-img">
</li>
</ul>
<br>
<h4 style="margin-bottom: 0;">Guideline to Get Token Number by Scanning QR Code</h4>
Use <span class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<a href="#" data-href="#docs-userguide-qrcode-scanner">QR Code Scanner</a>
</span> to scan the corresponding QR Code of the service
provided by system.
</div>
<div class="line"></div>
<!-- 2/ QR Code Scanner -->
<div id="docs-userguide-qrcode-scanner" class="docs-content-inner page-section">
<h3>2/ QR Code Scanner</h3>
Visit the website
via
the URL <b>[YOUR_DOMAIN]/qrcode-scanner</b>. We provide a domain for testing QR code
scanning functionality. <a target="_blank"
href="https://cocoqms.test.zinisoft.net/qrcode-scanner"><u>Refer here</u></a>.
<br>
<br>
<h4 style="margin-bottom: 0;">QR Code Scanning Guide</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Allow the website to use the device's camera if prompted and reload the page.
<br>
Select <b>Start scan</b> to turn on the camera.
<br>
<img src="images/user-guide/qrcode-scanner-2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Scan the QR code following the steps below. The QR Code is obtained from
<b>Configure Services</b> in
<b>System Settings</b>.
<br>
<b>Example: </b>QR Code of Insurance Examination service.
<br>
<img src="images/user-guide/qrcode-example.png" class="special-img-small">
<br><br>
<b class="text-danger">Note: Users cannot scan the same QR Code more than once
within 5 minutes.</b>
<br>
<br>
<img src="images/user-guide/qrcode-scanner-3.png" class="special-img">
<br>
<b>(1) Stop QR Code Scanning: </b> Turn off the device's camera and stop QR Code
scanning.
<br>
<b>(2) Switch Camera: </b> Switch between the front and rear cameras of the
device.
<br>
<b>(3) Device Camera: </b> Device camera area.
</li>
<li class="special-li"><span class="special-span">Step 3:</span>
<br>
After successful scanning, ticket information and history will be updated.
Similarly, when forwarded to the counters, history will also be updated
automatically.
<br>
<img src="images/user-guide/qrcode-scanner-4.png" class="special-img">
</li>
</ul>
<br>
<h4 style="margin-bottom: 0;">Guide to Download the Application on Mobile</h4>
<h5 style="margin-bottom: 0;">On Android</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Open the application in the <b>Chrome</b> browser and download the application
by following the steps below.
<br>
<img src="images/user-guide/qrcode-scanner-install-3.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Use the downloaded application as described in the <span class="one-page-menu"
data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
<a href="#" data-href="#docs-userguide-qrcode-scanner">QR Code Scanning
Guide</a>
</span> above.
</li>
</ul>
<br>
<h5 style="margin-bottom: 0;">On IOS</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Open the application in the <b>Safari</b> browser and download the application
by following the steps below.
<br>
<img src="images/user-guide/qrcode-scanner-install-4.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Use the downloaded application as described in the <span class="one-page-menu"
data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
<a href="#" data-href="#docs-userguide-qrcode-scanner">QR Code Scanning
Guide</a>
</span> above.
</li>
</ul>
</div>
<div class="line"></div>
</div>
<!-- END USER GUIDE FOR GUEST - CUSTOMER -->
<!-- USER GUIDE FOR STAFF -->
<div id="docs-userguide-staff">
<div id="docs-userguide-staff-overview" class="docs-content-inner page-section">
<h2>Staff Process Guide</h2>
<p>Below is the basic process for staff to serve and coordinate customers:</p>
</div>
<img src="images/user-guide/staff-guide.jpg" class="special-img-w-700">
<br>
<br>
<div id="docs-userguide-login" class="docs-content-inner page-section">
<span class="special-span">Step 1: </span>Receive the customer called to the counter.
You can prioritize customers at the staff management screen.
<br>
<span class="special-span">Step 2: </span>Serve the customer. If the customer does not
arrive, you can skip with the missed call option on the management screen. Repeat from
<b>Step 1</b>.
<br>
<span class="special-span">Step 3: </span>Guide the customer to the next counter.
<br>
<span class="special-span">Step 4: </span>Select the next counter (if available) and
mark as served on the management screen to update the queue.
<br>
<span class="special-span">Step 5: </span>Repeat from <b>Step 1</b>.
</div>
<div class="line"></div>
<!-- 1/ Reception Screen -->
<div id="docs-userguide-reception-screen" class="docs-content-inner page-section">
<h3>1/ Counter 1 (Example for Reception Screen)</h3>
<b>Description of Customer List:</b><br>
<div class="docs-custom-list">
<b>Queue Number (N.o)</b>: customer's queue number.
</div>
<div class="docs-custom-list">
<b>Customer Code, Name</b>: customer information selected upon <b>Service
Complete</b>.
</div>
<div class="docs-custom-list">
<b>Counter</b>: next counter the customer will move to, selected upon <b>Service
Complete</b>.
</div>
<div class="docs-custom-list">
<b>Missed Call</b>: customers who have missed their service call.
</div>
<br>
The following operations can be performed on the customer list:
<br>
<img src="images/user-guide/reception-screen-list.png" class="special-img">
<br><b>(1) Search Served Customers:</b> search for served customers in the list by
<b>Customer Code</b> or <b>Name</b>.
<br><br>
<h4 style="margin-bottom: 0;">Instructions for Serving in Non-Demo Data Mode</h4>
Non-Demo Data Mode uses data from patients or hospital customers through a 3rd party
API. Refer to <b>PATIENT DATA INTEGRATION</b> for more details on customization.
<ul>
<li class="special-li"><span class="special-span">Step 1:</span><br>
Customers arrive at the counter and provide personal information (Medical
examination code, full name, or address) for the staff to search for their
information.</li>
<li class="special-li"><span class="special-span">Step 2:</span><br>
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
<b>Done</b> to complete.
<br>
<img src="images/user-guide/reception-screen-done.png" class="special-img">
<br>
<br>
After completion, the <b>Waiting to Call</b>, <b>Called</b>, and <b>Being
Served</b> lists will be updated.
<img src="images/user-guide/reception-screen-after-done.png"
class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Instructions for Serving in Demo Data Mode</h4>
Demo Data Mode uses patient data from the file <b>mock-patient-data.json</b>. You can
update patient data according to the predefined structure in this file on the Frontend.
<ul>
<li class="special-li"><span class="special-span">Step 1:</span><br>
Customers arrive at the counter and provide personal information (Medical
examination code, full name, or address) for the staff to search for their
information.</li>
<li class="special-li"><span class="special-span">Step 2:</span><br>
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
<b>Done</b> to complete.
<br>
<img src="images/user-guide/reception-screen-done-2.png" class="special-img">
<br>
<br>
After completion, the <b>Waiting to Call</b>, <b>Called</b>, and <b>Being
Served</b> lists will be updated.
<img src="images/user-guide/reception-screen-after-done-2.png"
class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Missed Call</h4>
Select the <b>Missed Call</b> button.
<br>
<img src="images/user-guide/reception-screen-missed-call.png" class="special-img">
<br>
<br>
After completion, the <b>Waiting to Call</b> and <b>Being Served</b> lists will be
updated.
<img src="images/user-guide/reception-screen-after-missed-call.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Priority Call</h4>
Select the <b>Call</b> button on a specific customer.
<br>
<img src="images/user-guide/reception-screen-call-priority.png" class="special-img">
<br>
<br>
After completion, the <b>Waiting to Call</b> and <b>Being Served</b> lists will be
updated.
<img src="images/user-guide/reception-screen-after-call-priority.png"
class="special-img">
</div>
<div class="line"></div>
<!-- 2/ Cashier Screen -->
<div id="docs-userguide-cashier-screen" class="docs-content-inner page-section">
<h3>2/ Counter 2 (Example for Cashier Screen)</h3>
<b>Description of Customer List:</b><br>
<div class="docs-custom-list">
<b>Queue Number (N.o)</b>: customer's queue number.
</div>
<div class="docs-custom-list">
<b>Customer Code, Name</b>: customer information.
</div>
<div class="docs-custom-list">
<b>Counter</b>: next counter the customer will move to, selected upon
<b>Payment</b>.
</div>
<div class="docs-custom-list">
<b>Missed Call</b>: customers who have missed their payment call.
</div>
<div class="docs-custom-list">
<b>Status</b>: customer has completed payment.
</div>
<br>
The following operations can be performed on the customer list:
<br>
<img src="images/user-guide/cashier-screen-list.png" class="special-img">
<br><b>(1) Search Customers Waiting for Payment:</b> search for guests - customers
waiting
for
payment in the list by <b>Customer Code</b> or <b>Name</b>.
<br><b>(2) Search Customers who have Paid:</b> search for guests - customers who have
already
paid in the list by <b>Customer Code</b> or <b>Name</b>.
<br><br>
<h4 style="margin-bottom: 0;">Payment Completed</h4>
Select the next counter, then click <b>Payment</b>.
<br>
<img src="images/user-guide/cashier-screen-done.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Payment</b>, <b>Paid</b>, and <b>Being
Served</b> customers will be updated.
<img src="images/user-guide/cashier-screen-after-done.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Missed Call</h4>
Select the <b>Missed Call</b> button.
<br>
<img src="images/user-guide/cashier-screen-missed-call.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Payment</b> and <b>Being Served</b>
customers will be updated.
<img src="images/user-guide/cashier-screen-after-missed-call.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Call for Payment</h4>
Select the <b>Call</b> button on a specific customer.
<br>
<img src="images/user-guide/cashier-screen-call-priority.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Payment</b> and <b>Being Served</b>
customers will be updated.
<img src="images/user-guide/cashier-screen-after-call-priority.png" class="special-img">
</div>
<div class="line"></div>
<!-- 3/ Doctor Screen -->
<div id="docs-userguide-doctor-screen" class="docs-content-inner page-section">
<h3>3/ Counter 3 (Example for Doctor Screen)</h3>
<b>Description of Customer List:</b><br>
<div class="docs-custom-list">
<b>Queue Number (N.o)</b>: customer's queue number.
</div>
<div class="docs-custom-list">
<b>Customer Code, Name</b>: customer information.
</div>
<div class="docs-custom-list">
<b>Missed Call</b>: customers who have missed their examination call.
</div>
<div class="docs-custom-list">
<b>Status</b>: customer has completed examination.
</div>
<br>
The following operations can be performed on the customer list:
<br>
<img src="images/user-guide/doctor-screen-list.png" class="special-img">
<br>
<b>(1) Search Customers Waiting for Examination:</b> search for guests - customers
waiting
for
examination in the list by <b>Customer Code</b> or <b>Name</b>.
<br><b>(2) Search Customers who have been Examined:</b> search for guests - customers
who
have
already been examined in the list by <b>Customer Code</b> or <b>Name</b>.
<br>
<br>
<h4 style="margin-bottom: 0;">Examination Completed</h4>
Select the next counter, then click <b>Examine</b>.
<br>
<img src="images/user-guide/doctor-screen-done.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Examination</b>, <b>Examined</b>,
<b>Being
Served</b>, and <b>Customer Statistics</b> will be updated.
<img src="images/user-guide/doctor-screen-after-done.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Missed Call</h4>
Select the <b>Missed Call</b> button.
<br>
<img src="images/user-guide/doctor-screen-missed-call.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Examination</b>, <b>Being Served</b>,
and
<b>Customer Statistics</b> will be updated.
<img src="images/user-guide/doctor-screen-after-missed-call.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Call for Examination</h4>
Select the <b>Examine</b> button on a specific customer.
<br>
<img src="images/user-guide/doctor-screen-call-priority.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Examination</b>, <b>Being Served</b>,
and
<b>Customer Statistics</b> will be updated.
<img src="images/user-guide/doctor-screen-after-call-priority.png" class="special-img">
</div>
<div class="line"></div>
<!-- 4/ Pharmacist Screen -->
<div id="docs-userguide-pharmacist-screen" class="docs-content-inner page-section">
<h3>4/ Counter 4 (Example for Pharmacist Screen)</h3>
<b>Description of Customer List:</b><br>
<div class="docs-custom-list">
<b>Queue Number (N.o)</b>: customer's queue number.
</div>
<div class="docs-custom-list">
<b>Customer Code, Name</b>: customer information.
</div>
<div class="docs-custom-list">
<b>Missed Call</b>: customers who have missed their medication collection call.
</div>
<div class="docs-custom-list">
<b>Status</b>: customer has completed medication collection.
</div>
<br>
The following operations can be performed on the customer list:
<br>
<img src="images/user-guide/pharmacist-screen-list.png" class="special-img">
<br>
<b>(1) Search Customers Waiting for Medication Collection:</b> search for guests -
customers
waiting for medication collection in the list by <b>Customer Code</b> or
<b>Name</b>.
<br><b>(2) Search Customers who have Collected Medication:</b> search for guests -
customers
who
have already collected medication in the list by <b>Customer Code</b> or
<b>Name</b>.
<br>
<br>
<h4 style="margin-bottom: 0;">Deliver Pharma Completed</h4>
Select <b>Deliver pharma</b>.
<br>
<img src="images/user-guide/pharmacist-screen-done.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Medication Collection</b>,
<b>Medication
Collected</b>, and <b>Being Served</b> will be updated.
<img src="images/user-guide/pharmacist-screen-after-done.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Missed Call</h4>
Select the <b>Missed Call</b> button.
<br>
<img src="images/user-guide/pharmacist-screen-missed-call.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Medication Collection</b> and <b>Being
Served</b> will be updated.
<img src="images/user-guide/pharmacist-screen-after-missed-call.png"
class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Call for Medication Collection</h4>
Select the <b>Call</b> button on a specific customer.
<br>
<img src="images/user-guide/pharmacist-screen-call-priority.png" class="special-img">
<br>
<br>
After completion, the lists of <b>Waiting for Medication Collection</b> and <b>Being
Served</b> will be updated.
<img src="images/user-guide/pharmacist-screen-after-call-priority.png"
class="special-img">
</div>
<div class="line"></div>
</div>
<!-- END USER GUIDE FOR STAFF -->
<!-- USER GUIDE FOR ADMIN -->
<div id="docs-userguide-admin">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>Administrator System Setup Guide</h2>
<p><a target="_blank" href="https://cocoqms.test.zinisoft.net/">CocoQMS</a> 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.</p>
</div>
<img src="images/user-guide/admin-guide.jpg" class="special-img-w-700">
<br>
<br>
<!-- 1/Login -->
<div id="docs-userguide-login" class="docs-content-inner page-section">
<h3>1/ Log in to the website</h3>
<br>
Access the system
via the URL <b>[YOUR_DOMAIN]/login</b>.
<br>
<br>
<h4 style="margin-bottom: 0;">Login guide is not in Demo accounts mode.</h4>
At the login screen, enter your <b>Email</b> and <b>Password</b>.
<br>
Choose <b>Log in</b> to complete.
<br>
<img src="images/user-guide/login.png" class="special-img-w-700">
<br>
<br>
<h4 style="margin-bottom: 0;">Login guide is in Demo accounts mode.</h4>
At the login screen, select any account in the table below.
<br>
Choose <b>Log in</b> to complete.
<br>
<img src="images/user-guide/login-3.png" class="special-img-w-700">
</div>
<div class="line"></div>
<!-- 2/Forgot Password -->
<div id="docs-userguide-forgot-password" class="docs-content-inner page-section">
<h3>2/ Forgot Password</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
At the login interface, click on <b>Forgot Password</b> to access the page for
receiving a new password.
<br>
<img src="images/user-guide/login-2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the email associated with your account into the field, then click
<b>Send</b> to receive a new password via email.
<br>
<img src="images/user-guide/forgot-password.png" class="special-img">
<br>
Use the new password to log in.
</li>
</ul>
</div>
<div class="line"></div>
<!-- 3/Overview -->
<div id="docs-userguide-overview" class="docs-content-inner page-section">
<h3>3/ Overview</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface, select <b>Overview</b>.
<br>
<img src="images/user-guide/overview.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<div>
<b>Patients Statistics</b>
<br>
Choose a counter and a time range to view the customers statistics chart.
<br>
<img src="images/user-guide/overview-2.png" class="special-img">
</div>
<br>
<div>
<b>Counter Shift Calendar</b>
<br>
<div><span class="special-span">Step 1:</span>
Select a time range to view the shift calendar during that period.
<br>
<img src="images/user-guide/overview-shift.png" class="special-img">
</div>
<br>
<div><span class="special-span">Step 2:</span>
Select personnel at the counter and the corresponding date to update the
shift calendar.
<br>
<img src="images/user-guide/overview-shift-2.png" class="special-img">
</div>
</div>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 4/Counter Management -->
<div id="docs-userguide-create-counter" class="docs-content-inner page-section">
<h3>4/ Counter Management</h3>
<h4 style="margin-bottom: 0;">Counter List</h4>
On the main interface, select <b>Counter</b>.
<br>
<img src="images/user-guide/counter-list-3.png" class="special-img">
<br>
<br>
<b>Description of Counter List:</b><br>
<div class="docs-custom-list">
<b>Counter Code</b>: Defines a code with a maximum of 10 characters in the format
A-Z 0-9, without special characters, used to distinguish between counters.
</div>
<div class="docs-custom-list">
<b>Counter Name</b>: Name of the counter, to distinguish between counters.
</div>
<div class="docs-custom-list">
<b>Display</b>: Display that the counter will use to display information.
</div>
<div class="docs-custom-list">
<b>Staff</b>: Primary staff assigned to the counter.
</div>
<div class="docs-custom-list">
<b>Ordinal</b>: Counter order, used to distinguish and facilitate tracking of
counters.
</div>
<div class="docs-custom-list">
<b>Status</b>: Status of the counter; if turned off, the counter will not be
displayed in other sections.
</div>
<br>
Operations that can be performed on the main page include:
<br>
<img src="images/user-guide/counter-list-change-view-mode.png" class="special-img">
<br>
<b>(1) Select List View Mode:</b> Switch to list view mode for counters.<br>
<b>(2) Select Grid View Mode:</b> Switch to grid view mode for counters.<br>
<b>(3) Search for Counter:</b> Search for counters by <b>Counter Code</b> or <b>Counter
Name</b>.<br>
<b>(4) Filter Counters:</b> Filter the counter list by Status.<br>
<b>(5) Upload Excel File:</b> Upload counter list using an Excel file. Ensure the
correct format and do not modify column structure; maximum file size is 20MB.<br>
<b>(6) Export to Excel File:</b> Export counter data to an Excel spreadsheet.<br>
<br>
<h4 style="margin-bottom: 0;">Add Counter</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add New</b> to add a new counter.
<br>
<img src="images/user-guide/counter-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Fill in the counter information:
<div class="docs-custom-list">
<b>Counter Code:</b> Specifies a code with a maximum of 10 characters in the
format A-Z 0-9, without special characters.
</div>
<div class="docs-custom-list">
Counter Name: Enter the counter name. Example: Cashier, Accountant.
</div>
<div class="docs-custom-list">
<b>Display:</b> Select the display that the counter will use to display
information.
<br><b class="text-danger">Note: Depending on the number of counters, the
display screen
will
display corresponding columns.</b>
<br>
<b>Example:</b> 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
<span class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<a href="#" data-href="#docs-userguide-create-display">Display
Management</a>
</span>.
</div>
<div class="docs-custom-list">
<b>Staff:</b> Select the staff member who will work at the counter.
</div>
<div class="docs-custom-list">
<b>Workflow:</b> Select the workflow for the counter. Each workflow will
have a sequence, separate sound flow, defining the customer examination
process.
</div>
<div class="docs-custom-list">
<b>Ordinal:</b> 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.
</div>
<div class="docs-custom-list">
<b>Status:</b> Operational status of the counter; if turned off, the counter
will be hidden from other sections such as staff, displays, counter shift
schedule, workflow.
</div>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/counter-create.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Edit Counter</h4>
<h5 style="margin-bottom: 0;">1. From the counter list screen (list view), you can
update counter information by performing the following actions:</h5>
<img src="images/user-guide/counter-edit.png" class="special-img">
<br>
<b>(1) Enable/Disable Status:</b> Temporarily lock/unlock the counter.<br>
<b>(2) Quick Edit:</b> Quickly change counter information.<br>
<b>(3) Detailed Edit:</b> Edit detailed counter information.<br>
<br>
<h5 style="margin-bottom: 0;">1.1 Quick Edit Guide:</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
Click on the <b>Quick Edit</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Select display and staff for the counter, then click <b>Save</b>.
<br>
<img src="images/user-guide/counter-edit-inline.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">1.2 Detailed Edit Guide:</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
Click on the <b>Detailed Edit</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Update the counter information similar to adding new, then click <b>Update</b>.
<br>
<img src="images/user-guide/counter-edit-form.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">2. From the counter list screen (grid view), you can
update counter information by performing the following actions:</h5>
<img src="images/user-guide/counter-edit-2.png" class="special-img">
<br>
<b>(1) Edit Staff:</b> Edit counter staff.<br>
<b>(2) Detailed Edit:</b> Hover over the <b>Menu</b> icon, then select <b>Update</b> to
edit detailed counter information.<br>
<br>
<h5 style="margin-bottom: 0;">2.1 Edit Staff Guide:</h5>
Select staff for the counter.
<br>
<img src="images/user-guide/counter-edit-staff.png" class="special-img">
<br><br>
<h5 style="margin-bottom: 0;">2.2 Detailed Edit Guide:</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click on the <b>Detailed Edit</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Update the counter information similar to adding new, then click <b>Update</b>.
<br>
<img src="images/user-guide/counter-edit-form.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Delete Counter</h4>
<h5 style="margin-bottom: 0;">1. From the counter list screen (list view), you can
delete a counter by performing the following actions:</h5>
<h5 style="margin-bottom: 0;">1.1 Delete Single Counter Guide</h5>
Select the <b>Delete</b> icon and <b>Ok</b> to delete the corresponding counter.
<br>
<img src="images/user-guide/counter-delete.png" class="special-img">
<br>
<br>
<h5 style="margin-bottom: 0;">1.2 Delete Multiple Counters Guide</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Select the <b>Checkbox</b> icon for the counters to be deleted, then click
<b>Delete</b>.
<br>
<img src="images/user-guide/counter-delete-multiple.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Click <b>Ok</b> to confirm deletion of the selected counters.
<br>
<img src="images/user-guide/counter-delete-multiple-2.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">2. From the counter list screen (grid view), you can
delete a counter by performing the following steps:</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Hover over the <b>Menu</b> icon, then select <b>Delete</b>.
<br>
<img src="images/user-guide/counter-delete-2.png" class="special-img">
<br>
<b>(1): </b> Menu
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Click <b>Ok</b> to confirm deletion of the counter.
<br>
<img src="images/user-guide/counter-delete-2-confirm.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 5/ Display Management -->
<div id="docs-userguide-create-display" class="docs-content-inner page-section">
<h3>5/ Display Management</h3>
<h4 style="margin-bottom: 0;">Display List</h4>
On the main interface, select <b>Display</b>.
<br>
<img src="images/user-guide/device-list-3.png" class="special-img">
<br>
<br>
<b>Description of Display List:</b><br>
<div class="docs-custom-list">
<b>Display Code</b>: Specifies a code with a maximum of 10 characters in the format
A-Z 0-9, without special characters, used to identify the display screen when
accessed via URL.
</div>
<div class="docs-custom-list">
<b>Name and Description of Display</b>: Information to distinguish between displays
of
the same and different types.
</div>
<div class="docs-custom-list">
<b>Ordinal</b>: Display order of screens, to distinguish between displays and
facilitate sorting and tracking.
</div>
<div class="docs-custom-list">
<b>Max Rows</b>: Maximum number of rows displayed for guests - customer lists
in the display's queue.
</div>
<div class="docs-custom-list">
<b>Counter</b>: List of counters using the display.
</div>
<div class="docs-custom-list">
<b>Status</b>: Activation status of the display; if turned off, the display cannot
be
used by counters.
</div>
<br>
Operations that can be performed on the main page include:
<br>
<img src="images/user-guide/device-list-2.png" class="special-img">
<br>
<b>(1) Search for Display:</b> Search for displays by <b>Display Code</b>, <b>Display
Name</b>, or <b>Description</b>.<br>
<b>(2) Filter Displays:</b> Select Status to filter the display list.<br>
<b>(3) Upload Excel File:</b> Upload display list using an Excel file. Maintain correct
format and do not alter column structure; maximum file size is 20MB.<br>
<b>(4) Export to Excel File:</b> Export display data to an Excel spreadsheet.<br>
<br>
<h4 style="margin-bottom: 0;">View Display</h4>
Click on the <b>View Display</b> icon for the display whose screen you want to view.
<br>
<img src="images/user-guide/device-view-screen.png" class="special-img">
<br>
<br><b class="text-danger">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:</b>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Access the sound settings of the <b>Chrome</b> browser via the link
<b>chrome://settings/content/sound</b>.
<br>
Then select <b>Sites can play sound</b> and click <b>Add</b>.
<br>
<img src="images/user-guide/chrome-sound-setting.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the domain of the website you intend to run into the address input field
and click <b>Add</b>.
<br>
<img src="images/user-guide/chrome-add-site.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Add Display</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add New</b> to add a new display.
<br>
<img src="images/user-guide/device-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the display information:
<br>
<div class="docs-custom-list">
<b>Display Code:</b> 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).
<br><b>Example:</b> to access the display screen with the code
<b>DEVICE003</b>, you can use the URL
<b>[YOUR_DOMAIN]/device/view/device003</b>.
</div>
<div class="docs-custom-list">
<b>Display Name:</b> Enter the name of the display.
</div>
<div class="docs-custom-list">
<b>Description:</b> Enter a description of the display, such as the type of
display: TV, Screen, etc.
</div>
<img src="images/user-guide/device-create-1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span>
<br>
Customize the display interface of the display, you can copy existing
representative fields (You can replace the field names in file
<b>variables.json</b> in Frontend):
<br>
<div class="docs-custom-list">
<b>{{LOGO}}</b>: Website logo, configured in the <b>General Settings</b> tab
under <b>Settings</b>.
</div>
<div class="docs-custom-list">
<b>{{APP_NAME}}</b>: Application name, configured in the <b>General
Settings</b> tab under <b>Settings</b>.
</div>
<div class="docs-custom-list">
<b>{{WORKFLOW_DATA}}</b>: Data of counters using this display,
including counter information and information of customers currently being
served, in waiting lists and missed calls at counters.
</div>
<div class="docs-custom-list">
<b>Ordinal:</b> Display order of counters in the list, used to distinguish
between counters for easier tracking and management.
</div>
<div class="docs-custom-list">
<b>Max Rows:</b> Maximum number of rows displayed for waiting
lists on each screen.
<br><b>Example:</b> 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.
</div>
<div class="docs-custom-list">
<b>Headline Font Size:</b> Font size of title headings on the display,
such as counter names, names of different types of waiting lists, missed
calls, etc.
</div>
<div class="docs-custom-list">
<b>Body Font Size:</b> Font size of other information besides headings on
the display, such as customer information.
</div>
<div class="docs-custom-list">
<b>Status:</b> Status of the display; when turned off, this display
cannot be used, simultaneously hiding the display from other categories such
as counter management, workflow.
</div>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/device-create-2.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Edit Display</h4>
On the main interface, you can update display information by the following actions:
<br>
<img src="images/user-guide/device-edit.png" class="special-img">
<br>
<b>(1) Edit Details:</b> Modify detailed display information.<br>
<b>(2) Enable/Disable Status:</b> Temporarily lock/unlock the display.<br><br>
<h5 style="margin-bottom: 0;">Guide to Editing Details</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
Click on the <b>Edit Details</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Change the display information as desired, then press <b>Update</b> to save the
edited information.
<br>
<img src="images/user-guide/device-edit-form.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Delete Display</h4>
<h5 style="margin-bottom: 0;">Guide to Deleting Individual Display</h5>
<ul style="margin-top: 0;">
<li class="special-li">
Click on the <b>Delete</b> icon and <b>Ok</b> to delete the corresponding
display.
<br>
<img src="images/user-guide/device-delete.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">Guide to Deleting Multiple Displays</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Select the <b>Checkbox</b> icon for the displays to be deleted, then click
<b>Delete</b>.
<br>
<img src="images/user-guide/device-delete-multiple.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Click <b>Ok</b> to confirm deletion of the selected displays.
<br>
<img src="images/user-guide/device-delete-multiple-2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 6/ Staff Management -->
<div id="docs-userguide-create-staff" class="docs-content-inner page-section">
<h3>6/ Staff Management</h3>
<h4 style="margin-bottom: 0;">Staff List</h4>
On the main interface, select <b>Staff</b>.
<br>
<img src="images/user-guide/staff-list-3.png" class="special-img">
<br>
<br>
<b>Description of Staff List:</b><br>
<div class="docs-custom-list">
<b>Staff Code</b>: Specifies a code with a maximum of 10 characters in the format
A-Z 0-9, without special characters, used to distinguish between staff members.
</div>
<div class="docs-custom-list">
<b>Email</b>: Email address of the staff member in standard format (e.g.,
abc@gmail.com), used to distinguish between staff members.
</div>
<div class="docs-custom-list">
<b>Full Name</b>: Full name of the staff member.
</div>
<div class="docs-custom-list">
<b>Phone Number</b>: Phone number of the staff member in numeric format 0-9.
</div>
<div class="docs-custom-list">
<b>Address</b>: Address of the staff member.
</div>
<div class="docs-custom-list">
<b>Position</b>: Position of the staff member within the system.
</div>
<div class="docs-custom-list">
<b>Status</b>: Account status; if deactivated, the staff member will be removed from
counters, counter schedules, and workflow streams.
</div>
<br>
Operations that can be performed on the main page include:
<br>
<img src="images/user-guide/staff-list-2.png" class="special-img">
<br>
<b>(1) Search for Staff:</b> Search for staff members by <b>Staff Code</b>, <b>Staff
Name</b>, or <b>Description</b>.<br>
<b>(2) Filter Staff by Status:</b> Select Status to filter the staff list.<br>
<b>(3) Filter Staff by Position:</b> Select the staff member's Position to filter the
staff list.<br>
<b>(4) Upload Excel File:</b> Upload staff list using an Excel file. Maintain correct
format and do not alter column structure; maximum file size is 20MB.<br>
<b>(5) Export to Excel File:</b> Export staff data to an Excel spreadsheet.<br>
<br>
<h4 style="margin-bottom: 0;">Add Staff</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add New</b> to add a new staff member.
<br>
<img src="images/user-guide/staff-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the staff member's information:
<br>
<div class="docs-custom-list">
<b>Staff Code:</b> Specifies a code with a maximum of 10 characters in the
format A-Z 0-9, without special characters.
</div>
<div class="docs-custom-list">
<b>Full Name:</b> Full name of the staff member.
</div>
<div class="docs-custom-list">
<b>Phone Number:</b> Phone number of the staff member in numeric format 0-9.
</div>
<div class="docs-custom-list">
<b>Email:</b> Email address of the staff member in standard format.
<br><b>Example:</b> abc@gmail.com
</div>
<div class="docs-custom-list">
<b>Position:</b> Select the staff member's position from the list.
</div>
<div class="docs-custom-list">
<b>Counter:</b> Select the counter that the staff member will manage.
</div>
<div class="docs-custom-list">
<b>Birthday:</b> Enter the staff member's birthday, within the
current date and displayed according to the date and time settings.
</div>
<div class="docs-custom-list">
<b>Sex:</b> Select the sex of the staff member.
</div>
<div class="docs-custom-list">
<b>Address:</b> Enter the address of the staff member.
</div>
<div class="docs-custom-list">
<b>Password:</b> Enter the account password, length from 6 - 256 characters.
</div>
<div class="docs-custom-list">
<b>Confirm Password:</b> Re-enter the password, must match the previously
entered password.
</div>
<div class="docs-custom-list">
<b>Avatar:</b> 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.
</div>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/staff-create.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Edit Staff Account</h4>
On the main interface, you can update the staff account by the following actions:
<br>
<img src="images/user-guide/staff-edit.png" class="special-img">
<br>
<b>(1) Edit Details:</b> Change detailed information of the account.<br>
<b>(2) Enable/Disable Account Function:</b> Perform lock/unlock account.<br>
<br>
<h5 style="margin-bottom: 0;">Guide to Editing Details</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
Click on the <b>Edit Details</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Change the account information as desired, then press <b>Save</b> to save the
edited information.
<br>
<img src="images/user-guide/staff-edit-form.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">Guide to Reset Password</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
Click on the <b>Edit Details</b> icon.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Click on <b>Reset Password</b>, then
select <b>Ok</b>. The system will send a new password to the registered
email address.
<br>
<img src="images/user-guide/staff-edit-reset-password.png" class="special-img">
<br>
<br>Use the new password to log in.
</li>
</ul>
<h4 style="margin-bottom: 0;">Delete Staff</h4>
<h5 style="margin-bottom: 0;">Guide to Deleting Individual Staff</h5>
<ul style="margin-top: 0;">
<li class="special-li">
Click on the <b>Delete</b> icon and <b>Ok</b> to delete the corresponding
staff member.
<br>
<img src="images/user-guide/staff-delete.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">Guide to Deleting Multiple Staff Members</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Select the <b>Checkbox</b> icon for the staff members to be deleted, then click
<b>Delete</b>.
<br>
<img src="images/user-guide/staff-delete-multiple.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Click <b>Ok</b> to confirm deletion of the selected staff members.
<br>
<img src="images/user-guide/staff-delete-multiple-2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 7/ Audio Management -->
<div id="docs-userguide-create-audio" class="docs-content-inner page-section">
<h3>7/ Audio Management</h3>
<h4 style="margin-bottom: 0;">List of Audios for Counters</h4>
On the main interface, select <b>Audio</b>.
<br>
<img src="images/user-guide/audio-list-4.png" class="special-img">
<br>
<br>
<b>Description of the list of counter audios:</b><br>
<img src="images/user-guide/audio-list-5.png" class="special-img">
<br>
<b>(1) Counter Name</b><br>
<b>(2) Text:</b> text used to generate the audio using AI.
<br>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.
<br><b>Example:</b> with {{NUMBER_ID}}, it will be replaced by the audio of the current
customer number generated in the Audio Configuration section of <span
class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<a href="#" data-href="#docs-userguide-setting">System Settings</a>.
<br><b>(3) Language:</b> language of the audio selected during initialization.
<br><b>(4) Audio:</b> audio generated by AI or uploaded from a display.
</span>.
<br>
<br>
<h4 style="margin-bottom: 0;">Create New Audio for Counter</h4>
<h5 style="margin-bottom: 0;">Create AI-generated Audio</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add New</b> on the counter to add a new audio.
<br>
<img src="images/user-guide/audio-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
<b>1. Guide to creating audio with regular text:</b> <br>
Enter audio information:
<br>
<div class="docs-custom-list">
<b>Text Content:</b> text to generate audio using AI.
</div>
<div class="docs-custom-list">
<b>Language:</b> choose the language for the audio, defaulting to Vietnamese
(vi-VN-Wavenet-A) if not selected.
</div>
<br>
Then select the <b>Create Audio from AI Text</b> icon.
<br>
<img src="images/user-guide/audio-create.png" class="special-img">
<br>
<br>
<b>2. Guide to creating customized audio:</b> <br>
To have the audio played as the customer or counter number, copy
<b>{{COUNTER_ID}}</b> for counter code or <b>{{NUMBER_ID}}</b> for guests -
customer
number from the top of the page or directly enter in the <b>Content</b> box as
required. Then select <b>Save</b>.
<br>
<img src="images/user-guide/audio-copy.png" class="special-img">
</li>
</ul>
<h5 style="margin-bottom: 0;">Upload Existing Audio</h5>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add New</b> on the counter to add a new audio.
<br>
<img src="images/user-guide/audio-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Select the <b>Upload</b> icon to use an existing audio. Then choose the audio
file from the display.
<br>
<img src="images/user-guide/audio-upload.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Customize Audio Stream Order</h4>
<span>The audio stream for each counter will follow a top-down order. To change this
order, follow these steps:</span>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
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.
<br>
<img src="images/user-guide/audio-list-3.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Select <b>Save</b> to save the new audio stream.
<br>
<img src="images/user-guide/audio-list-2.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Delete Audio</h4>
Click the <b>Delete</b> icon at the audio you want to delete, then select
<b>Save</b> to save the new audio stream.
<br>
<img src="images/user-guide/audio-delete.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Download Audio</h4>
Click the <b>Download</b> icon at the audio you want to download.
<br>
<img src="images/user-guide/audio-download.png" class="special-img">
</div>
<div class="line"></div>
<!-- 8/ Workflow Management -->
<div id="docs-userguide-create-workflow" class="docs-content-inner page-section">
<h3>8/ Workflow Management</h3>
<h4 style="margin-bottom: 0;">List of Workflows</h4>
On the main interface, select <b>Workflow</b>.
<br>
<img src="images/user-guide/workflow-list-4.png" class="special-img">
<br>
<br>
<b>Description of workflow list:</b><br>
<img src="images/user-guide/workflow-list-5.png" class="special-img">
<br>
<b>(1):</b> Workflow title.<br>
<b>(2):</b> Counter name within the workflow.<br>
<b>(3):</b> Display name used by the counter.<br>
<b>(4):</b> Avatar of the main personnel at the counter.<br>
<br>
<h4 style="margin-bottom: 0;">Create New Workflow</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add Group</b> to add a new workflow.
<br>
<img src="images/user-guide/workflow-list.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the workflow details: <br>
<div class="docs-custom-list">
<b>Title:</b> title of the workflow.
</div>
<div class="docs-custom-list">
<b>Description:</b> detailed description of the workflow.
</div>
<div class="docs-custom-list">
<b>Ordinal:</b> sequence of the workflow in the system, used to sort among
workflows. Workflow order is equivalent to the system's workflow process.
</div>
<div class="docs-custom-list">
<b>Status:</b> workflow status; if disabled, the workflow will be skipped in
the system's workflow process.
</div>
<br>
Then select <b>Add</b>.
<br>
<img src="images/user-guide/workflow-create.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Add Counter to Workflow</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Add Counter</b> on the workflow where counters need to be added.
<br>
<img src="images/user-guide/workflow-list-3.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
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.
<br>Then select <b>Add</b> to add the counter to the designated workflow.
<br>
<img src="images/user-guide/workflow-add-counter.png" class="special-img">
</li>
<!-- <li class="special-li"><span class="special-span">Step 3:</span>
<br>
Click <b>Save</b>.
<br>
<img src="images/user-guide/workflow-list-2.png" class="special-img">
</li> -->
</ul>
<h4 style="margin-bottom: 0;">Edit Workflow</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Click <b>Edit</b> icon on the workflow to edit.
<br>
<img src="images/user-guide/workflow-edit.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter workflow details similar to adding a new one, then select <b>Update</b>.
<br>
<img src="images/user-guide/workflow-edit-2.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Customize Workflow Order</h4>
<span>Workflows will be ordered based on the <b>Title</b> index. To change this order,
follow these steps:</span>
<br>
Drag and drop workflows to the desired position in the workflow, then select <b>Save</b>
to save the new workflow.
<br>
<img src="images/user-guide/workflow-edit-3.png" class="special-img">
<br><br>
<h4 style="margin-bottom: 0;">Delete Workflow</h4>
Click the <b>Delete</b> icon on the workflow you want to delete, then select
<b>Ok</b> to confirm deletion.
<br>
<img src="images/user-guide/workflow-delete.png" class="special-img">
<br>
<br>
<h4 style="margin-bottom: 0;">Remove Counter from Workflow</h4>
Click the <b>Delete</b> icon on the counter you want to remove from the workflow, then
select <b>Ok</b> to confirm removal.
<br>
<img src="images/user-guide/workflow-delete-2.png" class="special-img">
</div>
<div class="line"></div>
<!-- 9/ Statistics -->
<div id="docs-userguide-statistics" class="docs-content-inner page-section">
<h3>9/ Statistics</h3>
On the main interface, select <b>Statistics</b>.
<br>
<img src="images/user-guide/statistics-list.png" class="special-img">
<br>
<br>
<b>Description of customer statistics list:</b><br>
<div class="docs-custom-list">
<b>Counter Name</b>: names of the counters.<br>
</div>
<div class="docs-custom-list">
<b>Time</b>: formatted as DD/MM, indicating the number of customers per day at the
counters.
</div>
<br>
On the main page, you can perform the following actions:
<br>
<img src="images/user-guide/statistics-list-2.png" class="special-img">
<br>
<b>(1) Filter by time range:</b> filter the statistics list by a time range of up to 30
days, displaying time in the format set by the date-time settings.
<br><b>(2) Export to Excel file:</b> export statistical data to an Excel
spreadsheet.<br>
</div>
<div class="line"></div>
<!-- 10/ Update personal information -->
<div id="docs-userguide-update-information" class="docs-content-inner page-section">
<h3>10/ Update personal information</h3>
<h4 style="margin-bottom: 0;">Guide to updating personal information</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface, hover over the avatar icon in the top right corner.
<br>
Click on <b>Information</b> to go to the Personal Information page.
<br>
<img src="images/user-guide/topright-avatar-hover.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Enter the information to be updated in the Personal Information section:
<br>
<div class="docs-custom-list">
<b>Staff code:</b> Specifies the ID with a maximum of 10 characters in the
format A-Z 0-9 and does not contain special characters.
</div>
<div class="docs-custom-list">
<b>Full name:</b> Full name of the staff.
</div>
<div class="docs-custom-list">
<b>Phone number:</b> Staff's phone number in numeric characters 0-9.
</div>
<div class="docs-custom-list">
<b>Email:</b> Staff's email in standard email format.
<br><b>Example:</b> abc@gmail.com
</div>
<div class="docs-custom-list">
<b>Position:</b> Select the staff's position from the list.
</div>
<div class="docs-custom-list">
<b>Birthday:</b> Enter the staff's birthday, ensuring it does
not exceed the current date and displaying it in the format set by date-time
settings.
</div>
<div class="docs-custom-list">
<b>Sex:</b> Select the staff's sex.
</div>
<div class="docs-custom-list">
<b>Address:</b> Enter the staff's address.
</div>
<div class="docs-custom-list">
<b>Avatar:</b> 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.
</div>
<br>
Then click <b>Save</b> to save the personal information.
<br>
<img src="images/user-guide/information-page.png" class="special-img">
</li>
</ul>
<h4 style="margin-bottom: 0;">Guide to changing password</h4>
<ul style="margin-top: 0;">
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface, hover over the avatar icon in the top right corner.
<br>
Click on <b>Information</b> to go to the Personal Information
Management page.
<br>
<img src="images/user-guide/topright-avatar-hover.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
To change your password, enter the information in the Change Password
section:<br>
<div class="docs-custom-list">
<b>Current password:</b> Enter the current password of the account.
</div>
<div class="docs-custom-list">
<b>New password:</b> Enter a new password, different from the current
password and with a length of 6-256 characters.
</div>
<div class="docs-custom-list">
<b>Confirm password:</b> Re-enter the new password to confirm it matches the
new password entered above.
</div>
<br>
Then click <b>Save</b> to use the new password.
<br>
<img src="images/user-guide/information-page-2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 11/ System Settings -->
<div id="docs-userguide-setting" class="docs-content-inner page-section">
<h3>11/ System Settings</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface, hover over the avatar icon in the top right corner.
<br>
Click on <b>Settings</b> to go to the Settings page.
<br>
<img src="images/user-guide/topright-avatar-hover-2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Here are the types
of custom settings:
<br>
<br>
<b>General Settings</b>: Customize the values of general parameters
of the application.
<br>
Enter the following setup information:
<br>
<div class="docs-custom-list">
<b>Logo:</b> Upload a photo in JPG, PNG format with a maximum size of 2Mb to
make a logo for the application.
</div>
<div class="docs-custom-list">
<b>Favicon:</b> 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.
</div>
<div class="docs-custom-list">
<b>App Name:</b> Enter the name of the application.
</div>
<div class="docs-custom-list">
<b>Version:</b> Enter the updated version of the application.
</div>
<div class="docs-custom-list">
<b>Date Format:</b> Select the date format displayed by the application,
applicable to displaying time across all categories.
</div>
<div class="docs-custom-list">
<b>Email:</b> Enter the system's email, following the standard email format.
<br><b>Example:</b> abc@gmail.com
</div>
<div class="docs-custom-list">
<b>Phone Number:</b> Enter the system's phone number using numeric
characters 0-9.
</div>
<div class="docs-custom-list">
<b>Address:</b> Enter the system's address.
</div>
<div class="docs-custom-list">
<b>Language:</b> Choose the display language for the entire application.
</div>
<div class="docs-custom-list">
<b>Demo patients Mode:</b> In JSON format, simulated data for testing the
entire
application flow.
</div>
<div class="docs-custom-list">
<b>Demo accounts Mode:</b> In JSON format, simulated data to log in to use
the application.
</div>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/general-setting-edit.png" class="special-img">
<br>
<br>
<b>Colors and Typography</b>: Customize the colors and fonts of the entire
application.
<br>
<ul>
<li><b>Step 1:</b>
<br>Select the <b>Colors & Typography</b> tab in the <b>Settings</b>
screen.
<br>
<img src="images/user-guide/setting-tab-2-choose.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>Select the values for the desired colors and fonts to display.
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/color-and-font-setting-edit.png"
class="special-img">
</li>
</ul>
<b>Variable configuration</b>: Customize the
display format of displays such as customer information, time.
<br>
<ul>
<li><b>Step 1:</b>
<br>Select the <b>Variable configuration</b> tab in the <b>Settings</b>
screen.
<br>
<img src="images/user-guide/setting-tab-3-choose.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>Select the desired format for each parameter (You can replace the
field names in file
<b>variables.json</b> in Frontend).
<br>
<div class="docs-custom-list">
<b>Preview:</b> main layout of the display after updating.
</div>
<div class="docs-custom-list">
Customer information format includes Order Number and Name in the
<b>{{WORKFLOW_DATA}}</b> part of the <b>Preview</b> section.
</div>
<div class="docs-custom-list">
Time format includes <b>{{DATE}}</b> and <b>{{TIME}}</b> displayed
in the <b>Preview</b> section.
</div>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/variables-setting-edit.png"
class="special-img">
</li>
</ul>
<b>Audio Configuration</b>: Configure the audio played for guests - customer
queue
numbers on displays.
<br>
<ul>
<li><b>Step 1:</b>
<br>Select the <b>Audio configuration</b> tab in the <b>Settings</b>
screen.
<br>
<img src="images/user-guide/setting-tab-4-choose.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>
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.
<br>
The audio generation progress (%) is displayed in the <b>Progress
Bar</b>.
<br>
<img src="images/user-guide/audio-config-setting-edit.png"
class="special-img">
</li>
<br>
<li><b>Step 3:</b>
<br>
<div class="docs-custom-list">
Click <b>Save</b> to save the settings. If the audio has not been
generated completely, the audio generation process will
automatically proceed.
</div>
<div class="docs-custom-list">
Click <b>Regenerate audio</b> to always generate new audios
according to the settings and save the settings.
</div>
<br>
<img src="images/user-guide/audio-config-setting-force-generate.png"
class="special-img">
</li>
</ul>
<b>Configure Text-to-Speech Conversion</b>: Select AI-supported text-to-speech
services and configure the service settings.
<br>
<ul>
<li><b>Step 1:</b>
<br>Select the <b>Text to speech configuration</b> tab in the
<b>Settings</b> screen.
<br>
<img src="images/user-guide/setting-tab-5-choose.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>
Select the type of text-to-speech conversion service, click <b>Save</b>.
<br>
Then, find and edit the configuration of the selected service in the
<b>credentials.json</b> file in <b>Backend</b>
<br>
<img src="images/user-guide/text-to-speech-setting-preview.png"
class="special-img">
</li>
</ul>
<b>Configure Notifications</b>: 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.
<br>
<br>Select <b>Notifications</b> tab in the
<b>Settings</b> screen.
<br>
<img src="images/user-guide/setting-tab-6-choose.png" class="special-img">
<br>
<br>
<b>Description of notifications list:</b><br>
<div class="docs-custom-list">
<b>Content</b>: Display content of the notification.
</div>
<div class="docs-custom-list">
<b>Font size</b>: Font size of the notification content. Unit: pixel.
</div>
<div class="docs-custom-list">
<b>Display time</b>: Display duration of the notification. Unit: seconds.
</div>
<div class="docs-custom-list">
<b>Delay time</b>: Delay time after the display duration before the next
notification is shown. Unit: seconds.
</div>
<div class="docs-custom-list">
<b>Speed</b>: Movement speed of the notification from right to left.
</div>
<br>
Actions that can be performed here:
<br>
<br>
<b>Add new notification</b>
<br>Select <b>Add new</b> to add a new notification line.
<br>Then enter the required notification information and press <b>Save</b> to
save the list.
<br>
<img src="images/user-guide/notifications-setting-create.png"
class="special-img">
<br>
<br>
<b>Edit notification</b>
<br>Enter the information in the notification line to be edited and select
<b>Save</b> to save.
<br>
<img src="images/user-guide/notifications-setting-edit.png" class="special-img">
<br>
<br>
<b>Delete notification</b>
<br>Select the <b>Delete</b> button at the notification line to be deleted and
select <b>Save</b> to save.
<br>
<img src="images/user-guide/notifications-setting-delete.png"
class="special-img">
<br>
<br>
<b>Preview notification display</b>
<br>Select the <b>Preview</b> button. The list of notifications displayed on the
<b>Display</b> will be described in the box below.
<br>
<img src="images/user-guide/notifications-setting-preview.png"
class="special-img">
<br>
<br>
<b>Configure Services:</b> Edit the list of clinic services and the print
operations displayed on the ticketing screen.
<br>
<br>Select <b>Services</b> tab in the
<b>Settings</b> screen.
<br>
<img src="images/user-guide/setting-tab-7-choose.png" class="special-img">
<br>
<br>
<b>Description of services list:</b><br>
<div class="docs-custom-list">
<b>Code</b>: Service code. The maximum length is 15 characters, including
letters, numbers, hyphens, or underscores.
</div>
<div class="docs-custom-list">
<b>Name</b>: Service name.
</div>
<div class="docs-custom-list">
<b>Next workflow</b>: 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.
</div>
<div class="docs-custom-list">
<b>Preview</b>: Link for quick number taking at the service. Can be quickly
copied using the <b>Copy</b> icon next to it.
</div>
<div class="docs-custom-list">
<b>QR Code</b>: Can click to preview and download QR Code to your device,
use <b>QR
Code scanner</b> to scan and quickly take a token number at the service.
</div>
<br>
Actions that can be performed here:
<br>
<br>
<b>Add new service</b>
<br>Select <b>Add new</b> to add a new service line.
<br>Then enter the required service information and press <b>Save</b> to save
the list. After saving, the service code will automatically be converted to
uppercase and remove all spaces.
<br>
<img src="images/user-guide/services-setting-create.png" class="special-img">
<br>
<br>
<b>Edit service</b>
<br>Enter the information in the service line to be edited and select
<b>Save</b> to save.
<br>
<img src="images/user-guide/services-setting-edit.png" class="special-img">
<br>
<br>
<b>Delete service</b>
<br>Select the <b>Delete</b> button at the service line to be deleted and select
<b>Save</b> to save.
<br>
<img src="images/user-guide/services-setting-delete.png" class="special-img">
<br>
<br>
<b>Enable/disable print receipt option</b>
<br>Select the <b>Print receipt</b> checkbox. When enabled, after each token
number
taking at <b>Get Token Number</b> 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.
<br>Then select <b>Save</b> to save.
<br>
<img src="images/user-guide/services-setting-print.png" class="special-img">
<br>
<br>
<b>Preview and Download QR Code</b>
<ul>
<li><b>Step 1:</b>
<br>Click on the QR Code you want to view and download.
<br>
<img src="images/user-guide/services-setting-download-1.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>
You can use the QR Code directly to scan or click <b>Download</b> to
save
the QR Code to your device as an image.<br> You can use <b>QR Code
Scanner</b> to scan and get the token number quickly.
<br>
<img src="images/user-guide/services-setting-download-2.png"
class="special-img">
</li>
</ul>
<br><br>
<b>Print template</b>: Customize the layout and content displayed on the print
slip when successfully retrieving the token number at the ticketing screen.
<br>
<ul>
<li><b>Step 1:</b>
<br>Select <b>Print template</b> tab in the
<b>Settings</b> screen.
<br>
<img src="images/user-guide/setting-tab-8-choose.png"
class="special-img">
</li>
<br>
<li><b>Step 2:</b>
<br>
Enter the following setup information:
<br>
<div class="docs-custom-list">
<b>Custom fields value:</b>
The values of variables displayed in the print slip template (You
can replace the field names in file
<b>variables.json</b> in Frontend). If
left empty, the default values will be as follows:
<br>
<b>{{CONTACT_INFO}}:</b> Tel, E-mail, Address. These values are
taken from
<b>General settings</b>.
<br>
<b>{{FOOTER}}:</b> Thank you for using our services. Wishing you
good health!
</div>
<div class="docs-custom-list">
<b>Template:</b> Layout and content displayed in the print slip.
</div>
The contents of the Print Template will be described in detail in the
<b>Preview</b>
section on the right.
<br>
<br>
Then click <b>Save</b>.
<br>
<img src="images/user-guide/print-template-setting-edit.png"
class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
</div>
<!-- END USER GUIDE FOR ADMIN-->
<!-- APPLICATION VARIABLES -->
<div id="docs-app-variables">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>Application Variables</h2>
<p>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.
<br>
Below is information about the variables
used (You can adjust them inside <b>variables.json</b> file in Frontend).
</p>
</div>
<div class="docs-content-inner page-section">
<h3>List of Variables</h3>
<div class="table-container">
<table>
<tr>
<th>
<h4 style="margin-bottom: 0;">Variable Name</h4>
</th>
<th>
<h4 style="margin-bottom: 0;">Description</h4>
</th>
<th>
<h4 style="margin-bottom: 0;">Screen</h4>
</th>
</tr>
<tr>
<td>{{LOGO}}</td>
<td>Application logo</td>
<td>Display</td>
</tr>
<tr>
<td>{{APP_NAME}}</td>
<td>Name of the application</td>
<td>Display</td>
</tr>
<tr>
<td>{{WORKFLOW_DATA}}</td>
<td>Entire workflow data</td>
<td>Display</td>
</tr>
<tr>
<td>{{NUMBER_ID}}</td>
<td>Customer queue number</td>
<td>Display</td>
</tr>
<tr>
<td>{{COUNTER_ID}}</td>
<td>Counter ID</td>
<td>Display</td>
</tr>
<tr>
<td>{{FULLNAME}}</td>
<td>Customer full name</td>
<td>Display</td>
</tr>
<tr>
<td>{{DATE}}</td>
<td>Today's date</td>
<td>Display</td>
</tr>
<tr>
<td>{{TIME}}</td>
<td>Current time</td>
<td>Display</td>
</tr>
<tr>
<td>{{CONTACT_INFO}}</td>
<td>Hospital contact information</td>
<td>Ticket</td>
</tr>
<tr>
<td>{{TICKET_DATA}}</td>
<td>Data related to the token number</td>
<td>Ticket</td>
</tr>
<tr>
<td>{{FOOTER}}</td>
<td>Footer of the print slip</td>
<td>Ticket</td>
</tr>
</table>
</div>
</div>
<div class="line"></div>
</div>
<!-- END APPLICATION VARIABLES -->
<!-- PATIENT DATA API INTEGRATION -->
<div id="docs-api-integration">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>Patient Data API Integration</h2>
<p>Guide on how to integrate the API for patient or customer data within the hospital's
data.</p>
</div>
<div class="docs-content-inner page-section">
<h3 style="margin-bottom: 0">1/ Backend</h3>
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 <b>Integrate with 3rd API</b> mentioned in the <b>Installation</b> section.
<br>
<br>
<img src="images/backend/patient_data_en.png" alt="">
<br><br>
<div class="line"></div>
<h3 style="margin-bottom: 0">2/ Frontend</h3>
You need to update the <b>Endpoint</b> (VITE_PATIENT_API_URL) information of the API in
the <b>.env</b> file to connect to the new API.
<br>
<img src="images/user-guide/patient-data-api-config.png" class="special-img-w-700">
</div>
<div class="line"></div>
</div>
<!-- END PATIENT DATA API INTEGRATION -->
<!-- FAQS -->
<div id="docs-faqs">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>FAQs</h2>
<p>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.</p>
</div>
<div class="docs-content-inner page-section">
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">How to create a Token number to display on the
device screen?</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<p>You can refer to the steps in the <b>Get Token Number</b> section of
the <b>User guide (For Guest - Customer)</b>.</p>
</div>
</div>
</div>
</div>
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">How to set up the display screen at a counter?
</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<ul>
<li class="special-li"><span class="special-span">Step 1:</span><br>
Sequentially create new information for the <b>Display</b>
(screen at the counter), <b>Staff</b> (staff at the counter),
and <b>Counter</b> (counter information). Refer to the
corresponding sections in the <b>User guide (For Admin)</b>.
</li>
<li class="special-li"><span class="special-span">Step 2:</span><br>
Create an <b>Audio</b> stream for the counter. This is the sound
that the <b>Display</b> will automatically play when the
customer retrieves the Token Number at the counter. Refer to the
<b>Audio management</b> section in the <b>User guide (For
Admin)</b>.
</li>
<li class="special-li"><span class="special-span">Step 3:</span><br>
Add the new <b>Counter</b> to an existing <b>Workflow</b> or
create a new <b>Workflow</b>.<br>
Additionally, you can drag and drop to change the operation flow
of the entire system.<br>
Refer to the <b>Workflow management</b> section in the <b>User
guide (For Admin)</b> for more details.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">Can I use the application via LAN?</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<p>Yes, you can use the application via LAN by configuring to replace
the link [YOUR_DOMAIN] with the IP address.</p>
</div>
</div>
</div>
</div>
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">What is the maximum number of users and
customers on the system?</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<p>There is no limit to the number of users and customers. Currently,
the default configuration on the system is 5000 people/day. You can
increase or decrease this number by creating a new audio number
using Google's AI.</p>
</div>
</div>
</div>
</div>
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">I don't hear the corresponding number sound on
the queue display. What should I do?</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<p>According to browser regulations, the system cannot automatically
play sound. You need to add your domain to the browser's WHITELIST
to enable automatic sound playback:</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span><br>
Access the browser's sound settings in <b>Chrome</b> via the
link <b>chrome://settings/content/sound</b>. Then select
<b>Sites can play sound</b> and choose <b>Add</b>.<br>
<img src="images/user-guide/chrome-sound-setting.png"
class="special-img-w-700">
</li>
<li class="special-li"><span class="special-span">Step 2:</span><br>
Add your planned domain name to run in the input path and select
<b>Add</b>.<br>
<img src="images/user-guide/chrome-add-site.png"
class="special-img-w-700">
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="faq active">
<div class="question">
<h4 style="margin-bottom: 0px;">What do I need to do to automatically print
content with the application?</h4>
<svg width='15' height='10' viewBox="0 0 42 25" class="arrow">
<path d="M3 3L21 21L39 3" stroke="white" stroke-width="7"
stroke-linecap="round" />
</svg>
</div>
<div class="wrapper">
<div>
<div class="answer">
<p>According to browser policies like <b>Chrome</b>, you cannot
automatically print a webpage due to browser security concerns. To
achieve this, you need to add the application's domain to the
browser's whitelist via the following steps:</p>
<b>1/ Setup in Chrome Properties</b>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
Create a new shortcut for the <b>Chrome</b> browser on the
device's desktop.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
Right-click on the Chrome icon and select <b>Properties</b> or
click on the Chrome icon and press the <b>Alt + Enter</b> key
combination to access the settings.
</li>
<li class="special-li"><span class="special-span">Step 3:</span><br>
In the <b>Target</b> field of the <b>Shortcut</b> tab, add
<b>--kiosk-printing</b> at the end.
<br>
Then click <b>Apply</b> and <b>OK</b> to save.
<br>
<img src="images/user-guide/chrome-properties-setting.png"
class="special-img-w-300">
</li>
</ul>
<br>
<b>2/ Setup in Chrome Settings</b>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
Open <b>Chrome</b> from the shortcut created above.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
Navigate to the URL
<b>chrome://settings/content/popups?search=pop-up</b> to go to
the settings page.
<br>
<img src="images/user-guide/chrome-popup-setting-1.png"
class="special-img-w-700">
</li>
<li class="special-li"><span class="special-span">Step 3:</span><br>
Click <b>Add</b> in the <b>Allowed to send pop-ups and use
redirects</b> section and enter the website's domain into
the <b>Site</b>.
<br>
Then select <b>Add</b> to add it.
<br>
<img src="images/user-guide/chrome-popup-setting-2.png"
class="special-img-w-700">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
<!-- END FAQS -->
</div>
</div>
<script>
jQuery(document).ready(function ($) {
$("#docs").tabs({
show: { effect: "fade", duration: 400 },
activate: function (event, ui) {
$('html,body').stop(true).animate({
'scrollTop': $('.docs-content').offset().top - 40
}, 1250, 'easeInOutExpo');
}
});
$('#icons-filter').typing({
stop: function (event, $elem) {
var filterValue = $elem.val(),
count = 0;
if ($elem.val()) {
$(".docs-icons li").each(function () {
if ($(this).text().search(new RegExp(filterValue, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++
}
});
if (count > 0) {
$('#icons-filter-result').html('<strong>' + count + '</strong> Icons Found.');
} else {
$('#icons-filter-result').html('No Icons Found.');
}
} else {
$(".docs-icons li").show();
$('#icons-filter-result').html('');
}
count = 0;
},
delay: 500
});
$(".faq").on("click", function () {
$(this).toggleClass("active");
});
$(".question").on("click", function (event) {
event.stopPropagation();
$(this).parent().toggleClass("active");
});
$(".answer").on("click", function (event) {
event.stopPropagation();
});
});
</script>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>