# Incidents CMS

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FJSzFt09ZKsDFvcfm298T%2F4.png?alt=media&#x26;token=6a22a7a9-ba85-41e4-9dee-bc2d970871bc" alt=""><figcaption></figcaption></figure>

## <mark style="color:green;">Description</mark>&#x20;

The Incident Management System was designed to complement the BCC App Chat Admin CMS, providing a centralized platform for managing and tracking incidents reported by chat members. The system was initially developed to allow chat admins to create tickets from member chats, describing incidents that required attention. Subsequently, the system was enhanced to enable CMS operators to log incident reports directly into the system, without the need for tickets from the chat admin.

## <mark style="color:green;">Functions</mark>

### Data Entry for Incidents

* The operator can log an incident, whether with a supporting chat ticket from the member's app or not. Additional event details can be included, such as cost of damages, injured persons, response made, etc. Pictures and files can be attached as well.
* The system allows for easy searching and filtering of incidents, enabling the operator to quickly locate specific incidents and view their details and status.

### Data Entry for Feedback

* Commendations, suggestions, and complaints can be logged here, whether with a supporting chat ticket or not. Associated employees can be notified as well, as part of the planned Employees App.

### Timeline View

* A timeline of events per incident can also be viewed, to show a visual chronological progression of events. A higher level timeline, that which includes every incident that a member was associated with, is also possible.
* The operator can filter the timeline by type of event, date range, or other criteria to quickly locate specific information.

### Data Graphs

* A graph of the quantitative summary of events according to certain slices-of-time can be viewed. Breakdowns of total numbers per category can also be seen, enabling the operator to quickly identify trends and patterns.

### Help System

* A step-by-step guide that walks the user through a certain process (*see screenshot for example*).
* The help system includes a page to view application change logs, as well as a form for suggestions.

### Security

Each account is assigned specific roles and user permissions that dictate their access to various pages and the actions they are permitted to perform within the system. This ensures a secure and organized management of functionalities based on user responsibilities.

## <mark style="color:green;">Work Done</mark>

### Interviews

* Conducted manager interviews to gather requirements and ensure system met business needs.
* &#x20;Presented the design and system functionalities to managers to gather additional feedback.

### Development

* Designed database schema and created entity-relationship chart to ensure efficient data storage and relationships.
* Developed backend code and tested it thoroughly to ensure functionality, reliability, and performance.
* Created frontend code and tested it thoroughly to ensure user-friendly interface and seamless integration with backend.
* Produced comprehensive API documentation to facilitate future development and integration.

### Deployment

* Configured settings for DNS, hosting, and primary server, and deployed a production environment of the system.

### Support

* Provided training and support to operators to ensure successful adoption and usage of the system.

### Maintenance

* Addressed bugs and rolled out updates and feature requests to enhance functionality and performance.

## <mark style="color:green;">Tech Stack</mark>

![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge\&logo=express\&logoColor=%2361DAFB) ![Swagger](https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge\&logo=swagger\&logoColor=white) ![MicrosoftSQLServer](https://img.shields.io/badge/Microsoft%20SQL%20Server-CC2927?style=for-the-badge\&logo=microsoft%20sql%20server\&logoColor=white) ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge\&logo=vuedotjs\&logoColor=%234FC08D) ![Quasar](https://img.shields.io/badge/Quasar-16B7FB?style=for-the-badge\&logo=quasar\&logoColor=black) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\&logo=github\&logoColor=white) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\&logo=vite\&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge\&logo=npm\&logoColor=white)

* <mark style="color:blue;">**Apexcharts**</mark> - chart display
* <mark style="color:blue;">**Lottie**</mark> - animations
* <mark style="color:blue;">**Pinia**</mark> - data management
* <mark style="color:blue;">**Axios**</mark> - API communication
* <mark style="color:blue;">**driverJS**</mark> - help system

## <mark style="color:green;">Screenshots</mark>

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FWT7MkvLYDf4bTzxCI8ip%2F1.png?alt=media&#x26;token=87703ae2-2192-43a8-bea2-f2e320352004" alt=""><figcaption><p>Help system</p></figcaption></figure>

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FKVOJb7zwyO6de51rXFGy%2F3.png?alt=media&#x26;token=90a8b96d-97a2-44ac-8e3e-b22e90c7482f" alt=""><figcaption><p>Feedback input form</p></figcaption></figure>

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FJKC6NgRLpCsthDeHoTpP%2F12.png?alt=media&#x26;token=3816f948-bb33-4c41-88dc-7c58ebe917ec" alt=""><figcaption><p>Member History Page</p></figcaption></figure>

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FYUkWOtSqAlQufaR1gVZB%2F15.png?alt=media&#x26;token=151acb49-1740-43d0-91be-ea90c4ee2d7c" alt=""><figcaption><p>Development picture of the reports page</p></figcaption></figure>
