OTickets is a ticket support web application that simplifies the management of support tickets and provides a platform to handle frequently asked questions (FAQs) to enhance visitor and client experience.
If you found this repo helpful, please give it a (⭐). Thank you!
- Demo
- Features
- Languages and Tools
- Installation
- Usage
- User Stories
- Author
- Contributing
- License
Demo Video: https://youtu.be/fZGz6KKq8uw
Online Demo: https://omaghd.com/projects/otickets
- Implements a responsive design to ensure a good user experience on all devices.
- Utilizes the Repository Pattern and Services for maintainability.
- Follows clean code and Separation of Concerns principles.
- Uses reusable components and layouts to avoid duplication of code.
- Implements input validation and data encryption to protect user data.
- Sanitizes user input to prevent XSS attacks.
- Optimizes database performance by avoiding the N+1 problem.
- Uses Laravel Queues to send notifications asynchronously via email and database.
- And more...
- TypeScript 5
- Vue.js 3 (Composition API)
- Vue Router 4
- Pinia 2 (State Management)
- Tailwind CSS 3
- Headless UI
- PHP 8
- Laravel 10 API
- Laravel Sanctum (Authentication)
- MySQL
- Git
- GitHub
- NPM
- Composer
- PHP 8
- Composer
- Node.js
- NPM
- PNPM
-
Clone the repository
git clone https://github.com/omaghd/otickets.git
-
Install the dependencies
cd path/to/backend && composer install
cd path/to/frontend && pnpm install
-
Create a copy of your .env file
cd path/to/backend && cp .env.example .env
-
In the .env file in the backend, add database information to allow Laravel to connect to the database
DB_CONNECTION=mysql DB_HOST= DB_PORT= DB_DATABASE= DB_USERNAME= DB_PASSWORD=
-
Generate an app encryption key
cd path/to/backend && php artisan key:generate
-
Migrate and seed the database
cd path/to/backend && php artisan migrate --seed
-
Launch the backend
cd path/to/backend && php artisan serve
-
Change the .env file in the frontend to point to the backend
VITE_API_URL='http://127.0.0.1:8000/' VITE_API_URL_API='http://127.0.0.1:8000/api/'
-
Launch the backend and frontend in separate terminals
cd path/to/frontend && pnpm dev
cd path/to/backend && php artisan serve
-
Visit the application
http://localhost:8000
-
Link the storage folder in the backend
cd path/to/backend && php artisan storage:link
If you ran the database seeder, you can login with the following credentials:
| Role | Password | |
|---|---|---|
| Admin | contact@omaghd.com | OTickets@00 |
| Agent | agent@omaghd.com | OTickets@00 |
| Client | client@omaghd.com | OTickets@00 |
To run the tests in the backend, run the following command:
cd path/to/backend && php artisan testTo listen for queued notifications, run the following command:
cd path/to/backend && php artisan queue:listenI made it simple for you to test the API endpoints by providing a Postman collection.
You can download it from here.
⬆️| User Story | Description |
|---|---|
| View homepage | View an engaging introduction to the website |
| View the categories list and select a category | View a list of categories and select a category to view its related FAQs |
| View FAQs within selected category | View the FAQs within a selected category and read the answers to the questions |
| View related FAQs in same category | View the related FAQs in the same category |
| Search website for questions | Search the website for questions using the search palette |
| Trigger search palette using shortcut | Trigger the search palette using the CTRL + K or Meta + K shortcut |
| View search results for matching questions | View the search results for matching questions in the search palette The search results will include related FAQs |
| Login to my account | Access my account by providing my login credentials |
| Create an account to become a client | Register and create a new account with my personal details |
| Request to reset my password using my email | Request to reset my account password by providing my email address |
| Get notified by email with a reset password link | Receive an email notification containing a link to reset my password |
| Create a new password for my account | Set a new password for my account using the reset password link from my email |
| User Story | Description |
|---|---|
| View total number of tickets | Get an overview of the total number of tickets |
| View total number of assigned tickets | See how many tickets have been assigned to agents |
| View total number of unassigned tickets | See how many tickets are still waiting for assignment |
| View total number of resolved tickets | See how many tickets have been resolved |
| View total number of closed tickets | See how many tickets have been closed |
| View line chart of created tickets over time | Visualize the number of tickets created over time |
| View doughnut chart of ticket categories | See the distribution of ticket categories in a pie chart |
| View agent response times in a stacked chart | See how long agents take to respond to tickets |
| View pie chart of ticket counts by status | See the distribution of tickets by status (assigned, unassigned, resolved) |
| User Story | Description |
|---|---|
| View the users list | View the paginated list of the user accounts |
| Manage users (create, edit, delete) | Create, edit, or delete user accounts |
| Force delete and restore users | Permanently delete or restore deleted user accounts |
| Filter users list | Filter the users list by query, trash, role, department, and creation date range |
| User Story | Description |
|---|---|
| View the departments list | View the paginated list of the departments |
| Manage departments (create, edit, delete) | Create, edit, or delete departments |
| Force delete and restore departments | Permanently delete or restore deleted departments |
| Filter departments list | Filter the departments list by query and trash |
| User Story | Description |
|---|---|
| View the clients list | View the paginated list of the client accounts |
| Manage clients (create, edit, delete) | Create, edit, or delete client accounts |
| Force delete and restore clients | Permanently delete or restore deleted client accounts |
| Filter clients list | Filter the clients list by query, trash, and creation date range |
| User Story | Description |
|---|---|
| View the categories list | View the paginated list of the categories |
| Manage categories (create, edit, delete) | Create, edit, or delete categories |
| Force delete and restore categories | Permanently delete or restore deleted categories |
| Filter categories list | Filter the categories list by query, trash, department, and creation date range |
| User Story | Description |
|---|---|
| View the FAQs list | View the paginated list of the FAQs |
| Manage FAQs (create, edit, delete) | Create, edit, or delete frequently asked questions |
| Force delete and restore FAQs | Permanently delete or restore deleted FAQs |
| Filter FAQs list | Filter the FAQs list by query, trash, category, and creation date range |
| User Story | Description |
|---|---|
| View the canned responses list | View the paginated list of the canned responses |
| Manage canned responses (create, edit, delete) | Create, edit, or delete canned responses |
| Force delete and restore canned responses | Permanently delete or restore deleted canned responses |
| Filter canned responses list by query and trash | Find specific canned responses in the list based on filters |
| User Story | Description |
|---|---|
| View the newsletters list | View the paginated list of the newsletters |
| Manage newsletters (create, edit, delete) | Create, edit, or delete newsletters |
| Filter newsletters list by query | Find specific newsletters in the list based on filters |
| User Story | Description |
|---|---|
| View the tickets list | View the paginated list of all tickets |
| Manage tickets (create, edit, delete) | Create, edit, or delete support tickets |
| Force delete and restore tickets | Permanently delete or restore deleted tickets |
| Assign agents and view ticket history | Assign agents to tickets and view the history of assigned agents and the user who transferred the agent |
| Filter the tickets list | Filter the assigned tickets list by query, status, priority, category, client, agent and creation date range |
| User Story | Description |
|---|---|
| Update profile information | Update profile name, email, phone number, and profile picture |
| Update password | Update the password |
| Receive notifications when requesting to change password | Get notified via email and notifications when requesting to change password |
| Receive notifications when changing password | Get notified via email and notifications when changing password successfully |
| User Story | Description |
|---|---|
| Manage notifications (mark as read, delete, etc) | Mark notifications as read, delete them, and perform other actions |
| View paginated list of notifications | See all the notifications in a paginated list |
| Filter notifications list by all or unread status | Find specific notifications in the list based on status filters |
| User Story | Description |
|---|---|
| View total number of tickets assigned to me | See how many tickets are assigned to me as an agent |
| View total number of assigned tickets | See how many tickets are assigned to all agents |
| View total number of unassigned tickets | See how many tickets are unassigned and belong to my department or not assigned to any agent |
| View total number of resolved tickets | See how many tickets I have resolved as an agent |
| View total number of closed tickets | See how many tickets I have closed as an agent |
| View line chart of created tickets over time for tickets assigned to me | Visualize the number of tickets I have created over time |
| View doughnut chart of ticket categories and counts for tickets assigned to me | See the distribution of ticket categories and their count for the tickets assigned to me in a doughnut chart |
| View pie chart of ticket counts by status for tickets assigned to me | See the distribution of tickets by status (assigned, unassigned, resolved) for the tickets assigned to me in a pie chart |
| User Story | Description |
|---|---|
| View the canned responses list | View the paginated list of the canned responses that belong to me or the canned responses with no agent |
| Manage my canned responses | Create, edit, or delete my canned responses |
| Force delete and restore canned responses | Permanently delete or restore deleted my canned responses |
| Filter the canned responses list | Filter the canned responses list by query and trash |
| User Story | Description |
|---|---|
| View the tickets list | View the paginated list of tickets that I'm assigned to or the tickets that are unassigned and belong to the same department as mine |
| Create and assign tickets | Create a ticket for a client and assign a random agent or assign it to myself by selecting the category |
| Edit ticket category and priority | Edit the category and priority of a ticket that I'm currently assigned to |
| Assign agents to tickets | Assign agents to be the current agent in a ticket that I'm currently assigned to View the history of all assigned agents and see who transferred the agent |
| View ticket details | View the details of the tickets where I'm currently assigned as the agent |
| View ticket conversations | View all the conversation of the tickets between me as the current agent or all the previous assigned agents and the client |
| Use my canned responses in tickets | List my canned responses in the new reply form and copy them to use |
| Reply to tickets | Reply to the tickets where I'm currently assigned as the agent and include file attachments |
| Resolve and close tickets | Reply and mark tickets as resolved or closed where I'm currently assigned as the agent |
| Filter assigned tickets list | Filter the assigned tickets list by query, status, priority, category, and creation date range |
| Get notified when assigned to new ticket | Receive email and notification when I am assigned to a new ticket |
| Get notified when client replies to my ticket | Receive email and notification when the client replies to a ticket where I am the current agent |
| Get notified when ticket status is closed or resolved | Receive email and notification when the ticket status is changed to closed or resolved by the client or myself |
| User Story | Description |
|---|---|
| Update profile information | Update profile name, email, phone number, and profile picture |
| Update password | Update the password |
| Receive notifications when requesting to change password | Get notified via email and notifications when requesting to change password |
| Receive notifications when changing password | Get notified via email and notifications when changing password successfully |
| User Story | Description |
|---|---|
| View the notifications list | View the paginated list of the notifications in a paginated list |
| Manage notifications (mark as read, delete, etc) | Mark notifications as read, delete them, and perform other actions |
| Filter notifications list by all or unread status | Find specific notifications in the list based on status filters |
| User Story | Description |
|---|---|
| View the tickets list | View the paginated list of my tickets |
| Create a ticket | Create a ticket and select its category and priority |
| View ticket details | View the details of my tickets including ticket reference, category, priority, last reply date, and status |
| View ticket conversations | View all the conversation of the tickets between me and the agents |
| Reply to tickets | Reply to my tickets that are not closed or resolved and include file attachments |
| Resolve and close tickets | Reply and mark my tickets as resolved or closed |
| Filter assigned tickets list | Filter my tickets list by query, status, priority, category, and creation date range |
| Get notified when a new ticket is created for me | Receive email and notification when a new ticket is created for me |
| Get notified when agent replies to my ticket | Receive email and notification when the agent replies to my ticket |
| Get notified when ticket status is closed or resolved | Receive email and notification when the ticket status is changed to closed or resolved by the agent or myself |
| User Story | Description |
|---|---|
| Update profile information | Update profile name, email, phone number, and profile picture |
| Update password | Update the password |
| Receive notifications when requesting to change password | Get notified via email and notifications when requesting to change password |
| Receive notifications when changing password | Get notified via email and notifications when changing password successfully |
| User Story | Description |
|---|---|
| View the notifications list | View the paginated list of the notifications in a paginated list |
| Manage notifications (mark as read, delete, etc) | Mark notifications as read, delete them, and perform other actions |
| Filter notifications list by all or unread status | Find specific notifications in the list based on status filters |
| Website | omaghd.com |
|---|---|
| /in/omaghd | |
| /omaghd | |
| GitHub | /omaghd |
Contributions, issues and feature suggestions are welcome!
This project is MIT licensed.
Please give credit to this project if you plan to use it elsewhere ❤️.
Your support is greatly appreciated!