Client Portal

This article represents a quick overview of standard options available while using the Client Portal. Explore this article to get more about the user interface, functions and deployment configurations.

General 

The Client Portal is a separate application integrated with JeraSoft VCS via API. It has a user friendly interface and it's tailored for your clients to manage services they purchased. For example, they can check their rates, refill balance, update contact and billing details, check a detailed call history with all related statistics and cost.

It has been designed to be as simple and easy to understand as possible and should cut a lot of basic customers' questions. The panel is provided as open source, so it can be used as starting point for your own development or as a reference and example.  

Functional advantages

1. Fully API based

   The system is fully based on API integration. Therefore, it does not require any direct access to the VCS database and provides more secure approach.
    

2. Can be hosted separately

   You can move the Clients Portal to other server and just configure VCS IP address in the API settings. As result you can fully isolate VCS from the public internet.
    

3. Full Open Sourced

   The portal comes with all source code. It allows you to either customize the system or extend it or just use as a reference guide for development of your own portal. 

Portal Features

There are 4 main section in the Client Portal – overview, billing & payments, usage history and account sections. Let's view them in more details below.

  Screenshot: Client Portal settings/main components
 

Overview

• Dashboard – displays an overview of a real-time user's balance and recent service usage. Click the "Refill Balance" or arrow on the toolbar to open billing settings. If you click the "View Details", it takes you to the Detailed section to view a relevant usage history.
  
• Rates – shows all rates and allows to easily sort and search them by services.

Billing and Payments

• Refill balance - here user can recharge the account via payment gateways.
• Redeem Voucher - here the user can refill the balance with a respective voucher code.
• Payment History - shows a list of all transactions that belong to the user.
• Invoices - shows all invoices that belong to the user with possibility to download them.

Usage History

• Summary - shows summary statistics of the services used by the client, allows to easily filter data by period, service, account or package.
• Detailed - shows detailed statistics of the client's usage, including rates used for billing.

Account Settings

• Profile Settings - allows user to update the profile settings, including company name, e-mail, address, registration and tax ID.
• Change Password - allows user to change the password for the portal.
  

Portal Configuration

There are few steps to be performed before the Client Portal can be used:

• Put access credentials into the Client Portal config file
• Configure firewall to allow users access

Configuration File

In order to tune Client Portal configuration you have to:

1. Login to the VCS server via SSH
2. Go to the opt/jerasoft/vcs/portal-backend/config directory.
3. Make a copy of the file customer-params.default.json and name it, for example, customer-params.json.
4. Open customer-params.json file to edit and set the mandatory settings:
   
   1. coreApi.authToken
   2. managementApi.login
   3. managementApi.password
      
   4. billingUri
      

Below we provide description of all settings you can find in the file. You can also find sample configuration with all available settings at:

    opt/jerasoft/vcs/portal-backend/config/customer-params.json.sample

"uri": "http://127.0.0.1:3080"

"authToken": "example"

"uri": "https://127.0.0.1/jsonrpc"

"login": "login"

"password": "password"

"billingUri": "https://127.0.0.1"

Firewall Settings

Client Portal works on ports 9080 and 9090. Make sure you open them on your firewall in order for portal to work correctly.

Panel Access

Access to the panel for your customers is configured in a respective customer's properties in the VCS web-interface: Clients section → Client Info tab → Client's Panel sub-section. Make sure, you have enabled the access and specified login and password. The "Access" field is deprecated and will be removed in further versions. 

 Screenshot: Clients section/Client Info tab

Panel Deployment 

As mentioned above, JeraSoft Client Portal is provided as an open source software, so you can look into it, learn form it, and adapt it to your needs. You can use it as is, make it a starting point for your own development or use as a reference guide to build an own solution. 

How to set your own domain name for the portal?

To add your own domain name for the Client Portal, you have to do the following:

1. Deploy a small node that will accept all requests (VPS, Cloud Instance or physical server)
2. Install any light-weight HTTP proxy daemon (for example, NGINX)
3. Configure virtual host with your domain name and SSL certificates (optionally)
4. Configure HTTP daemon to forward all requests from https://your_domain_name/ to http://vcs-ip-address:9080
   

How to add your logo or styles?

You may personalize your panel to make it better fit to your company look and feel. You can start with logo and if you are familiar with CSS, you may add CSS styles. Below you can find locations for the respective files. Please note that given paths are relative to /opt/jerasoft/vcs/portal-frontend/dist/assets.

• Logo for Login Page – image-resources/logo-login.png
• Logo for Client Portal – image-resources/logo-panel.png
• CSS Files – client_portal_custom.css

How to make an advanced panel customization?

As mentioned above, Client Portal comes with all source code and you can use it as a reference guide or a starting point for your own development. Feel free to modify the code, improve it or extend, build it into some other platforms. For example, you can update the menu, a panel view, edit a set of filters, modify grouping options or create your own panel by taking it as example a functional implementation.

The technologies used for the development of the Clients Portal are: 

1. 1. PHP: Yii2

   2. JavaScript: Angular 2

   3. HTML/CSS: Bootstrap

   4. Tools: Swagger