Agencia de Publicidad Gato Negro

Agencia de publicidad

Sistema de gestión para una agencia de publicidad, gestiona el catálogo de servicios, los clientes, las transacciones realizadas, los pagos por transacción y los usuarios del sistema con permisos personalizados.

Detalles generales

Objetivo

Centralizar y gestionar la información de las distintas áreas del negocio, incluyendo ventas, servicios y clientes; controlar el acceso a las funcionalidades del sistema mediante roles y permisos; mantener una vista pública de los servicios vinculada a la información gestionada internamente; visualizar los indicadores clave de rendimiento (KPIs) a través de un dashboard interactivo; y facilitar el seguimiento integral de cada pedido mediante una pizarra de gestión que permita controlar sus pagos, estado y entrega.

Intervención

Un sistema web de gestión comercial con acceso por roles y permisos, administración de servicios y clientes, registro y seguimiento de ventas y pedidos, y visualización de indicadores mediante un dashboard interactivo. Se incorporó una vista pública para presentar información del negocio y los servicios que ofrece, cuyo contenido se mantiene actualizado desde el sistema administrativo, permitiendo crear, editar y eliminar los servicios que se muestran a los visitantes, junto con herramientas para controlar los pagos, supervisar el estado de los pedidos y exportar los registros de ventas a Excel.

Características
  • Gestión de servicios con precios y costos
  • Registro y consulta de clientes con acceso a su historial de compras
  • Registro y control de ventas, incluyendo pagos parciales mediante distintos medios de pago
  • Seguimiento del estado de los pedidos y su entrega
  • Gestión de pagos por transacción
  • Dashboard interactivo con indicadores de ventas y comparativas de desempeño
  • Exportación de reportes a Excel
  • Control de acceso mediante roles y permisos diferenciados

Detalles técnicos

Tecnologías
Vue.jsLaravelMySQLLaravel SanctumSpatie Laravel PermissionVitePiniaVue RouterAxiosBootstrap
Arquitectura

Arquitectura cliente-servidor basada en una SPA desarrollada con Vue.js que consume una API REST implementada en Laravel y conectada a una base de datos MySQL. La navegación se gestiona mediante Vue Router y el estado compartido con Pinia. La comunicación con la API se realiza mediante Axios, mientras que Laravel Sanctum gestiona la autenticación y Spatie Laravel Permission permite controlar el acceso a las funcionalidades según los roles y permisos asignados a cada usuario.

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

Persistencia relacional con MySQL, con entidades relacionadas para la gestión comercial e integridad de los datos. Estructura definida mediante migraciones, seeders de Laravel y configuración inicial de roles y permisos.

Infraestructura

Hosting estático en Cloudflare - Backend contenerizado con Docker y desplegado en Render - Base de datos MySQL administrada en Aiven - Comunicación HTTP entre frontend y API REST

Seguridad

Autenticación mediante Laravel Sanctum - Autorización basada en roles y permisos con Spatie Laravel Permission - Protección de rutas mediante middleware de autenticación y autorización - Validación de datos mediante clases StoreRequest y UpdateRequest - Control de operaciones y permisos en controladores - Protección de asignación masiva mediante configuración de modelos Eloquent - Transformación y control de datos de salida mediante API Resources - Consultas a base de datos mediante Eloquent ORM - Gestión de credenciales mediante variables de entorno .env

Componentes
  • Autenticación con Laravel Sanctum.
  • Gestión de usuarios basada en roles y permisos mediante Spatie Laravel Permission.
  • Dashboard interactivo con visualización de indicadores mediante Chart.js.
  • Exportación de reportes mediante Laravel Excel.
  • Enrutamiento del frontend mediante Vue Router para las vistas administrativas y públicas.
  • Gestión del estado compartido de la interfaz mediante Pinia.
  • Interfaz SPA en Vue.js y Bootstrap, con comunicación HTTP hacia la API mediante Axios.
  • Persistencia de datos relacional mediante MySQL.
  • Gestión del entorno de desarrollo y compilación del frontend mediante Vite.
Integraciones
  • Laravel Excel (exportación de reportes de ventas)