Dashboard Template

Una solución empresarial robusta con Laravel 12, Inertia y React

Características • Requisitos • Instalación • Documentación • Soporte

🌟 Descripción

Este Dashboard Template es una solución integral para el desarrollo acelerado de aplicaciones web empresariales. Construido sobre Laravel 12 y potenciado con Inertia.js y React, ofrece una experiencia de desarrollo fluida con un sistema avanzado de gestión de roles y permisos integrado mediante spatie/laravel-permission.

¿Por qué elegir este template? Combina lo mejor de Laravel y React, ofreciendo un punto de partida completo para aplicaciones empresariales con un enfoque en seguridad, rendimiento y mantenibilidad.

✨ Características

🔧 Backend Robusto

Laravel 12 con las últimas características y optimizaciones para un rendimiento excepcional.

⚛️ Frontend Reactivo

React con Inertia.js proporcionando una experiencia SPA sin sacrificar la simplicidad de Laravel.

🔒 Seguridad Avanzada

Sistema de autenticación completo
Protección CSRF
Autenticación de dos factores (2FA)
Sanitización automática de inputs

👥 Control de Acceso

Sistema avanzado de roles y permisos con spatie/laravel-permission, fácil de implementar y escalar.

🎨 UI/UX Superior

Diseño totalmente responsive
Componentes modernos y reutilizables
Transiciones y animaciones fluidas
Temas personalizables

⚡ Optimizado para Rendimiento

Carga diferida de componentes
Caché inteligente
Minificación de recursos
Lazy loading automático

📋 Requisitos

Componente	Requisito Mínimo	Recomendado
PHP	8.4+	8.4+
Composer	2.x	2.5+
Node.js	18+	20+
Base de Datos	MySQL 8.0+, PostgreSQL 14+, SQLite 3	MySQL 8.0+, PostgreSQL 16+
Servidor Web	Apache/Nginx	Nginx

🚀 Instalación

# Clonar el repositorio
git clone https://github.com/Angelito-Systems/Dashboard-Template-Laravel-12-Inertia-React.git
cd dashboard-template

# Instalar dependencias de PHP
composer install

# Instalar dependencias de JavaScript
npm install

# Configuración del entorno
cp .env.example .env
php artisan key:generate

# Configurar la base de datos en el archivo .env
# Ejecutar migraciones y seeders
php artisan migrate --seed

# Compilar assets
npm run dev     # Para desarrollo
npm run build   # Para producción

💡 Consejo: Para un despliegue rápido en producción, puede utilizar nuestro script automatizado:

curl -s https://deploy.angelitosystems.com/dashboard | bash

📚 Documentación

Sistema de Roles y Permisos

El dashboard implementa una estructura jerárquica de control de acceso basada en roles:

Rol	Descripción	Permisos Típicos
Super Admin	Control total del sistema	Todos los permisos disponibles
Admin	Gestión de la plataforma y usuarios	Crear/editar/eliminar recursos y usuarios
Editor	Gestión de contenidos	Crear/editar contenidos
User	Acceso básico a funcionalidades	Ver contenido, gestionar perfil propio

Implementación en código:

// Verificación de roles
if ($user->hasRole(['admin', 'super-admin'])) {
    // Acciones permitidas para administradores
}

// Verificación de permisos específicos
if ($user->can('delete_users')) {
    // Lógica para eliminar usuarios
}

// Aplicación en políticas
public function viewAny(User $user)
{
    return $user->hasPermissionTo('view_dashboard');
}

Roles y Permisos

El sistema cuenta con tres roles principales:

Roles

Admin
- Tiene acceso completo a todas las funcionalidades del sistema
- Puede gestionar usuarios, roles y permisos
- Tiene acceso a todas las secciones administrativas
Desarrollador
- Puede acceder al panel de control
- Puede editar su perfil
- Puede crear y editar contenido
- Tiene acceso a los logs del sistema
- Puede acceder a la API
Usuario
- Acceso básico al panel de control
- Puede editar su propio perfil

Usuarios de Demostración

Para facilitar las pruebas, el sistema incluye usuarios preconfigurados para cada rol:

Rol	Usuario	Contraseña
Admin	admin@ejemplo.com	password
Desarrollador	dev@ejemplo.com	password
Usuario	usuario@ejemplo.com	password

Configuración Inicial

Seed de Datos

Para cargar los roles, permisos y usuarios demo en la base de datos:

php artisan migrate:fresh --seed

Esta operación ejecutará los seeders en el siguiente orden:

PermissionSeeder: Crea los permisos básicos del sistema
RoleSeeder: Crea los roles y asigna los permisos correspondientes
DemoSeeder: Crea los usuarios de demostración con sus respectivos roles

Estructura de Directorios

dashboard-template/
├── app/                       # Lógica de la aplicación
│   ├── Http/                  
│   │   ├── Controllers/       # Controladores por dominio
│   │   ├── Middleware/        # Middleware personalizado
│   │   └── Requests/          # Form requests y validación
│   ├── Models/                # Modelos de datos
│   ├── Policies/              # Políticas de autorización
│   └── Services/              # Servicios de la aplicación
├── config/                    # Configuraciones
├── database/                  # Migraciones y seeders
├── resources/
│   ├── js/                    # Frontend React
│   │   ├── Components/        # Componentes React reutilizables
│   │   ├── Layouts/           # Layouts de la aplicación
│   │   ├── Pages/             # Páginas
│   │   └── Utils/             # Utilidades JavaScript
│   ├── css/                   # Estilos
│   └── views/                 # Vistas (principalmente emails)
├── routes/                    # Definición de rutas
└── tests/                     # Pruebas automatizadas

🔧 Personalización

El dashboard está diseñado para ser altamente personalizable:

📱 Temas

Modificar variables CSS en resources/css/theme.css

🧩 Componentes

Extender componentes base en resources/js/Components/

⚙️ Funcionalidad

Añadir controladores en app/Http/Controllers/

🔗 Rutas

Configurar rutas en routes/web.php

🛡️ Seguridad

⚠️ Importante: Si descubre algún problema de seguridad, por favor envíe un email a seguridad@angelitosystems.com en lugar de usar el sistema de issues.

🌐 Soporte

Para soporte técnico o consultas:

📧

Email
soporte@angelitosystems.com

💬

Chat en vivo
chat.angelitosystems.com

<div style="display: flex; align-items: center;">
  <div style="background: linear-gradient(90deg, #3A1C71 0%, #D76D77 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 15px rgba(58, 28, 113, 0.3);">
    <span style="color: white; font-size: 20px;">📝</span>
  </div>
  <div>
    <strong style="font-size: 18px; color: #3A1C71;">Foros</strong><br>
    <a href="https://foro.angelitosystems.com" style="color: #D76D77; text-decoration: none; font-weight: 500;">foro.angelitosystems.com</a>
  </div>
</div>

<div style="display: flex; align-items: center;">
  <div style="background: linear-gradient(90deg, #3A1C71 0%, #D76D77 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 15px rgba(58, 28, 113, 0.3);">
    <span style="color: white; font-size: 20px;">📚</span>
  </div>
  <div>
    <strong style="font-size: 18px; color: #3A1C71;">Documentación</strong><br>
    <a href="https://docs.angelitosystems.com" style="color: #D76D77; text-decoration: none; font-weight: 500;">docs.angelitosystems.com</a>
  </div>
</div>

    <div style="display: flex; align-items: center;">
      <div style="background: linear-gradient(90deg, #3A1C71 0%, #D76D77 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 15px rgba(58, 28, 113, 0.3);">
        <span style="color: white; font-size: 20px;">🐛</span>
      </div>
      <div>
        <strong style="font-size: 18px; color: #3A1C71;">Reportar problemas</strong><br>
        <a href="https://github.com/Angelito-Systems/Dashboard-Template-Laravel-12-Inertia-React/issues" style="color: #D76D77; text-decoration: none; font-weight: 500;">GitHub Issues</a>
      </div>
    </div>
  </div>
</div>

🏢 Acerca de Angelito Systems

Angelito Systems

Angelito Systems es una consultora de desarrollo tecnológico especializada en soluciones empresariales de alta calidad. Con más de una década de experiencia, nos dedicamos a transformar ideas en productos tecnológicos robustos y escalables para clientes en todo el mundo.

👨‍💻 Creador

Angel Calderon Mantilla

CEO de Angelito Systems

Experto en arquitectura de software empresarial y soluciones web avanzadas. Con más de 15 años de experiencia en el desarrollo de aplicaciones de alto rendimiento y escalables para empresas de diversos sectores. Apasionado por la creación de herramientas que simplifiquen el trabajo de otros desarrolladores.

📄 Licencia

MIT con Requisito de Atribución

Este proyecto está licenciado bajo la Licencia MIT con Requisito de Atribución, que permite el uso comercial y no comercial con la condición de que se proporcione atribución al autor original y a Angelito Systems.

Requisitos de atribución:

Incluir una atribución visible a "Angelito Systems" en su aplicación o documentación
Mantener un enlace a angelitosystems.com en aplicaciones públicas
Reconocer a "Angel Calderon Mantilla" como creador original en productos comerciales

Para solicitar una exención de los requisitos de atribución, contacte directamente con licencias@angelitosystems.com

🚀 Próximas Funcionalidades

🌐 Internacionalización

Sistema completo de internacionalización (i18n) con:

Soporte para múltiples idiomas (ES, EN, FR, DE, PT)
Detección automática del idioma del navegador
Formato de fechas, números y monedas por región
Traducciones gestionables desde el panel de administración
Contenido dinámico multiidioma para SEO

♦ Planificado para Q3 2024

<!-- Módulo de Análisis -->
<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 6px 16px rgba(58, 28, 113, 0.08); border-left: 4px solid #D76D77; transition: transform 0.3s ease;">
  <h4 style="color: #D76D77; margin-top: 0; display: flex; align-items: center;">
    <span style="background: linear-gradient(90deg, #D76D77, #FFAF7B); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
      <span style="color: white; font-size: 16px;">📊</span>
    </span>
    Módulo de Análisis
  </h4>
  <p style="color: #333; margin-bottom: 10px;">Sistema analítico empresarial con:</p>
  <ul style="color: #333; padding-left: 20px; margin-bottom: 15px;">
    <li>Tableros personalizables con métricas clave</li>
    <li>Gráficos interactivos y exportables</li>
    <li>Reportes programados automáticos</li>
    <li>Integración con exportación a Excel/PDF</li>
    <li>Alertas basadas en métricas configurables</li>
  </ul>
  <div style="background-color: rgba(215, 109, 119, 0.05); border-radius: 6px; padding: 8px 12px; font-size: 14px;">
    <span style="color: #D76D77;">♦</span> <span style="color: #666;">Planificado para Q4 2024</span>
  </div>
</div>

<!-- App Mobile -->
<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 6px 16px rgba(58, 28, 113, 0.08); border-left: 4px solid #FFAF7B; transition: transform 0.3s ease;">
  <h4 style="color: #3A1C71; margin-top: 0; display: flex; align-items: center;">
    <span style="background: linear-gradient(90deg, #FFAF7B, #3A1C71); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
      <span style="color: white; font-size: 16px;">📱</span>
    </span>
    App Mobile
  </h4>
  <p style="color: #333; margin-bottom: 10px;">Aplicación móvil completa con:</p>
  <ul style="color: #333; padding-left: 20px; margin-bottom: 15px;">
    <li>Versiones para iOS y Android</li>
    <li>Sincronización offline/online automática</li>
    <li>Notificaciones push personalizables</li>
    <li>Autenticación biométrica (FaceID/TouchID)</li>
    <li>Integración con cámara y almacenamiento</li>
  </ul>
  <div style="background-color: rgba(255, 175, 123, 0.05); border-radius: 6px; padding: 8px 12px; font-size: 14px;">
    <span style="color: #FFAF7B;">♦</span> <span style="color: #666;">Planificado para Q1 2025</span>
  </div>
</div>

<!-- API Gateway -->
<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 6px 16px rgba(58, 28, 113, 0.08); border-left: 4px solid #3A1C71; transition: transform 0.3s ease;">
  <h4 style="color: #D76D77; margin-top: 0; display: flex; align-items: center;">
    <span style="background: linear-gradient(90deg, #3A1C71, #D76D77); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
      <span style="color: white; font-size: 16px;">🔌</span>
    </span>
    API Gateway
  </h4>
  <p style="color: #333; margin-bottom: 10px;">Integración avanzada de servicios con:</p>
  <ul style="color: #333; padding-left: 20px; margin-bottom: 15px;">
    <li>Endpoints RESTful documentados con Swagger</li>
    <li>Autenticación OAuth2 y JWT segura</li>
    <li>Rate limiting y protección contra ataques</li>
    <li>Webhooks configurables para eventos</li>
    <li>SDK para integraciones de terceros</li>
  </ul>
  <div style="background-color: rgba(58, 28, 113, 0.05); border-radius: 6px; padding: 8px 12px; font-size: 14px;">
    <span style="color: #D76D77;">♦</span> <span style="color: #666;">Planificado para Q2 2025</span>
  </div>
</div>

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si desea contribuir a este proyecto:

Haga un fork del repositorio
Cree una rama para su característica (git checkout -b feature/amazing-feature)
Realice sus cambios
Haga commit de sus cambios (git commit -m 'Añadir una característica asombrosa')
Empuje a la rama (git push origin feature/amazing-feature)
Abra un Pull Request

Por favor, asegúrese de actualizar las pruebas según corresponda y seguir nuestras directrices de contribución detalladas en CONTRIBUTING.md.

⭐ Proyectos Relacionados

🔍 Admin Panel Pro

Panel de administración avanzado con análisis y reportes.

Ver proyecto →

🛒 Laravel E-Commerce

Plataforma completa de comercio electrónico con Laravel y Vue.js.

Ver proyecto →

🔄 API Generator

Generador de APIs RESTful con documentación automática.

Ver proyecto →

🚀 COMENZAR AHORA

Diseñado con ❤️ por el equipo de Angelito Systems

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
.github		.github
app		app
bootstrap		bootstrap
config		config
database		database
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
artisan		artisan
components.json		components.json
composer.json		composer.json
composer.lock		composer.lock
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js

License

Angelito-Systems/Dashboard-Template-Laravel-12-Inertia-React

Folders and files

Latest commit

History

Repository files navigation

Dashboard Template

🌟 Descripción

✨ Características

🔧 Backend Robusto

⚛️ Frontend Reactivo

🔒 Seguridad Avanzada

👥 Control de Acceso

🎨 UI/UX Superior

⚡ Optimizado para Rendimiento

📋 Requisitos

🚀 Instalación

📚 Documentación

Sistema de Roles y Permisos

Roles y Permisos

Roles

Usuarios de Demostración

Configuración Inicial

Seed de Datos

Estructura de Directorios

🔧 Personalización

📱 Temas

🧩 Componentes

⚙️ Funcionalidad

🔗 Rutas

🛡️ Seguridad

🌐 Soporte

Para soporte técnico o consultas:

🏢 Acerca de Angelito Systems

Angelito Systems

👨‍💻 Creador

Angel Calderon Mantilla

📄 Licencia

MIT con Requisito de Atribución

🚀 Próximas Funcionalidades

🌐 Internacionalización

🤝 Contribuciones

⭐ Proyectos Relacionados

🔍 Admin Panel Pro

🛒 Laravel E-Commerce

🔄 API Generator

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Sponsor this project

Packages 0

Languages

Packages