Agencia de Publicidad Gato Negro

Advertising agency

Management system for an advertising agency, handling the service catalog, clients, completed transactions, per-transaction payments and system users with custom permissions.

General details

Objective

Centralize and manage information from the business's different areas, including sales, services and clients; control access to the system's features through roles and permissions; maintain a public view of the services linked to internally managed information; display key performance indicators (KPIs) through an interactive dashboard; and support end-to-end tracking of each order through a management board that controls its payments, status and delivery.

Intervention

A commercial management web system with role- and permission-based access, service and client administration, sales and order registration and tracking, and indicator visualization through an interactive dashboard. A public view was added to present business and service information, kept up to date from the administrative system, allowing services shown to visitors to be created, edited and deleted, along with tools to control payments, monitor order status and export sales records to Excel.

Characteristics
  • Service management with prices and costs
  • Client registration and lookup with access to purchase history
  • Sales registration and control, including partial payments across different payment methods
  • Order status and delivery tracking
  • Per-transaction payment management
  • Interactive dashboard with sales indicators and performance comparisons
  • Report export to Excel
  • Access control through differentiated roles and permissions

Technical details

Technologies
Vue.jsLaravelMySQLLaravel SanctumSpatie Laravel PermissionVitePiniaVue RouterAxiosBootstrap
Architecture

Client-server architecture based on an SPA built with Vue.js that consumes a REST API implemented in Laravel and connected to a MySQL database. Navigation is managed with Vue Router and shared state with Pinia. Communication with the API is handled via Axios, while Laravel Sanctum manages authentication and Spatie Laravel Permission controls access to features based on each user's assigned roles and permissions.

(Vue 3 + Bootstrap 5)Frontend SPA (Pinia + Axios)API REST (Laravel + Sanctum)Base de datos MySQL 8.4 (Aiven)
Data

Relational persistence with MySQL, with related entities for commercial management and data integrity. Structure defined through migrations, Laravel seeders and initial role and permission configuration.

Infrastructure

Static hosting on Cloudflare - Backend containerized with Docker and deployed on Render - MySQL database managed on Aiven - HTTP communication between the frontend and the REST API

Security

Authentication via Laravel Sanctum - Role- and permission-based authorization with Spatie Laravel Permission - Route protection via authentication and authorization middleware - Data validation via StoreRequest and UpdateRequest classes - Operation and permission control in controllers - Mass assignment protection via Eloquent model configuration - Output data transformation and control via API Resources - Database queries via Eloquent ORM - Credential management via .env environment variables

Components
  • Authentication with Laravel Sanctum.
  • Role- and permission-based user management via Spatie Laravel Permission.
  • Interactive dashboard with indicator visualization via Chart.js.
  • Report export via Laravel Excel.
  • Frontend routing via Vue Router for administrative and public views.
  • Shared interface state management via Pinia.
  • SPA interface in Vue.js and Bootstrap, with HTTP communication to the API via Axios.
  • Relational data persistence via MySQL.
  • Development environment and frontend build management via Vite.
Integrations
  • Laravel Excel (exportación de reportes de ventas)