Dashboard for chatbot and jobsearch activities on pasona.vn website

Table of content

1. Introduction and source code structure
2. Source code's brief explaination

Introduction and source code structure

This dashboard demo is used to supervise chatbot and job search performance on pasona.vn website. The frontend design uses Vuetify2 library in Vue.js framework, reference from Materio, while the backend language is Python, with SQL as the query language. This repository has 2 main folders: backend and frontend. The dataset is private so it won't be uploaded here, I'll show the data schema instead. The instruction for execution and modifying has been noted in the README.md file found in each folder.

The dashboard has 3 main dasboard pages: overview, chatbot, job search, and 3 data table pages: chatbot message history, job search history, customer information. There are some sub pages: log in, sign up, error, profile/setting. The index page is the login page, and when the user successfully logs in, the overview page will appear. The navigation pane is on the left side, showing directions to 2 other dashboards and the data table pages. If the user wants to back to the overview page, click on the company logo on the top of the left side. On the top right side, when clicking on the avatar, the user will see 2 options: setting and log out. There are 4 time phrases available to view the statistics: today, week, month, quarter, year. The default time is today. When the user chooses a time option, this value will be stored in the local storage and other pages' time component will be updated with this value. The time component will reset to default when the tab is closed or the page is refreshed.

login page

overview page with navigation pane and user options

time component list

Overview page

This page summarizes crucial metrics of both chatbot section and job search section. The user can click on the title of the section to be directed to the detailed dashboard of the chosen one. Moreover, each metric/card is contained in a card, which has a "Detailed" button getting to the data table page storing the relevant data of that element.
In the chatbot section, the first metric, total users, indicates how many customers have interacted and sent messages chatbot; the second metric is total messages, calculating the amount of messages chatbot has received; the last one is the average rating score for the chatbot to express how much satisfied the customers generally feel when experiencing the service.

overview-chatbot section

Below the chatbot section is the job search summary. This section includes the total of searchs, the distribution of each search fields and the real time search statistics. Due to the huge amount of data, the real time chart visual won't be displayed on the website, but the sample code has been inserted into the source.

overview-jobsearch section (total search and search options)

Chatbot dashboard page

In this dashboard, the characteristics of customers on the first row and inquiries patterns through the three remaining cards will be displayed. The new user semi-donut chart estimates the proportion of new users accounts for the total of chatbot user. The rentation rate refers to the percentage of customers who continue using the chatbot over a given timeframe. The satisfaction bar chart reflects the fluctuation of customers' overall exprerience in a week.

chatbot dashboard - customer summary

For the message analysis, currently donut chart for topic distribution and line chart topic over time are currently used. Up to now, the chatbot topic has 3 categories: job vacancies, salary, and trivia. In the topic over time, only job vacancies and salary are selected for presentation, as the trivia class is used to identify spam message and cut down on the process time for this class. The last visual is word cloud to demonstrate the common words appearing in the message, however, the library is not supported in Vuetify 2, which leads to the blank visual.

chatbot dashboard - message summary

Jobsearch dashboard page

In this dashboard, the first 3 charts show the overall perfomance of the search job tool, and the remaining cards focus on each search field. The search KPI semi-donut chart informs how much percentage of KPI team has achieved. The horizontal bar chart analyzes where the customers uses the search engine most, as the customers can use this tool when accesing the Job Page or using the chabot. The multi-label line chart summarizes the total of search on each field.

jobseach dashboard - overall

The search engine has 5 fields: keyword, location, salary range, industry, language. Each field's performance will be displayed in a card. Word cloud chart for keyword field helps investigate which job titles candidates seek most, so that the marketing team can modify the ranking of job vacancies, and expand the client diversity. For the location field, geography chart will point out top 5 cities found most in the search engine.

jobsearch dashboard - keyword and location chart

The salary range is displayed in the donut chart. The language distribution is displayed in horizontal line chart. Top 19 most searched industries are shown in tree map chart.

jobsearch dashboard - keyword and location chart

Data table pages

In the data table page, on the left side of time component combobox is the "All" button, which retrieves the whole data in the table.

layout of data table page

Source code's brief explaination

1. Frontend

Here's the source code structure:



frontend source code structure

• Images are stored in assets folder.
• The design of core layouts (header, navigation pane, vertical menu) is stored in layouts folder.
• The design of layout for components (card) is stored in components folder.
• Endpoints are defined in index.js file in routes folder.
• The layout of pages are stored in views folder.
• Other sub pages like Log in, Register,... is stored in pages folder.



To call the API from the backend server to get data, Vuex, a state management pattern + library for Vue.js applications, is applied. In the actions part, a function named getChartData is created to use axios method, with 2 params time component and visual name. This approach will cut down on the length of code lines by defining a function and reusing it many times, instead of repeating this part whenever calling the API to get data.



source code of Vuex actions


For usage, import the mapAcions to the layout files. In the methods part, declare the function getChartData in the actions part by the command "...mapActions(["getChartData"]),", declare a variable to call this.getChartData(), declaring 2 specific values for params and store retrieved data.




import object Vuex



call the getChartData() function

2. Backend

The structure of the source code is arranged based on MVC model. API is built by Flask and registed by Blueprint in app.py file. Endpoint is defined in routes folder. In controller file, the data retrieved from the client will be extract and input to DashboardService() function, and return the queried data to send back to client. in dashboard_service.py, steps to create SQL queries and process output data are defined.



backend source code structure



a part of dashboard_service SQL formation