levi.2526
/
trello_fake
mirror of https://github.com/LeviPlanelles/trello_fake.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
trello_fake/README.md

6.6 KiB
Raw Permalink Blame History

Preview

Dashboard de Proyectos Dolibarr

Aplicación web moderna para visualizar y gestionar proyectos de Dolibarr con una interfaz intuitiva y profesional.

✨ Características

  • 📊 Vista de proyectos en Grid y Lista
  • 🎨 Modo oscuro completo
  • 📱 Diseño responsive
  • 🔍 Búsqueda en tiempo real
  • 📈 Estadísticas y KPIs
  • 🔐 API segura (API key protegida en el backend)
  • ⚡ Skeletons loading para mejor UX
  • 📄 Página de detalle completa para cada proyecto
  • 🔑 Login con credenciales de Dolibarr
  • ✅ Estados: Borrador, Activo y Cerrado

🚀 Getting Started

Requisitos previos

  • Node.js 18+
  • Docker (para Dolibarr + MariaDB)
  • Dolibarr con API REST habilitada

Instalación

  1. Clonar el repositorio
git clone <tu-repo>
cd trello_fake
  1. Instalar dependencias
npm install
  1. Levantar Dolibarr con Docker
docker-compose up -d

Abre Dolibarr en http://localhost:8200 y completa el asistente inicial si es la primera vez.

Credenciales de instalación:

  • Admin: admin / p4ssw0rd
  • DB: host=mariadb, db=dolibarr, user=dolibarr, pass=dolibarr_password
  1. Habilitar API REST y generar API Key

En Dolibarr:

  • Configuración > Módulos/Aplicaciones > API REST
  • Configuración > API REST > Generar API Key
  1. Configurar variables de entorno

Crea un archivo .env.local en la raíz:

# API de Dolibarr (segura - solo servidor)
DOLIBARR_API_URL=http://localhost:8200/api/index.php
DOLIBARR_API_KEY=tu-api-key-aqui

# Variables públicas
NEXT_PUBLIC_DOLIBARR_USER_ID=2

# Compatibilidad (deprecated)
NEXT_PUBLIC_API_URL=http://localhost:8200/api/index.php
NEXT_PUBLIC_DOLIBARR_API_KEY=tu-api-key-aqui
  1. Iniciar el servidor de desarrollo
npm run dev

Abre http://localhost:3000 en tu navegador. Inicia sesión con tus credenciales de Dolibarr.

📊 Datos de Prueba

Si no tienes proyectos en tu Dolibarr, puedes generar datos de prueba:

# Con el servidor corriendo (npm run dev)
npm run seed

Este comando elimina los proyectos existentes y crea 14 proyectos con tareas:

  • Estados: Borrador, Activo y Cerrado
  • Progreso y presupuestos variados
  • Tareas asociadas por proyecto

Ver más detalles en scripts/README.md

🏗️ Estructura del Proyecto

/
├── app/                          # Next.js App Router
│   ├── api/dolibarr/[...path]/  # API Route proxy (protege la API key)
│   ├── proyectos/[id]/          # Página de detalle de proyecto
│   ├── layout.tsx               # Layout principal
│   └── page.tsx                 # Página de inicio
├── components/
│   ├── dashboard/               # Componentes del dashboard
│   ├── ui/                      # Componentes shadcn/ui
│   ├── theme-provider.tsx       # Provider de tema
│   └── theme-toggle.tsx         # Toggle de modo oscuro
├── lib/                         # Utilidades y servicios
│   ├── dolibarrClient.ts       # Cliente de API
│   ├── projectsService.ts      # Servicio de proyectos
│   ├── tasksService.ts         # Servicio de tareas
│   ├── usersService.ts         # Servicio de usuarios
│   └── authService.ts          # Login y verificación de token
├── types/                       # Definiciones TypeScript
└── scripts/                     # Scripts de utilidad

🧠 Arquitectura (resumen)

  • UI (Next.js): muestra proyectos y tareas.
  • Proxy API (/api/dolibarr/...): protege la API key y reenvía llamadas a Dolibarr.
  • Dolibarr + MariaDB: fuente real de datos.
  • Auth: login contra Dolibarr, token guardado en localStorage y cookie para el middleware.

🛠️ Scripts Disponibles

npm run dev          # Servidor de desarrollo
npm run build        # Build de producción
npm run start        # Servidor de producción
npm run lint         # Ejecutar ESLint
npm run seed         # Reset + crear proyectos y tareas de prueba

🎨 Tecnologías

  • Framework: Next.js 16 (App Router)
  • Lenguaje: TypeScript 5
  • UI: shadcn/ui + Radix UI
  • Estilos: Tailwind CSS
  • Iconos: Lucide React
  • Tema: next-themes
  • API: Dolibarr REST API

🔐 Seguridad

La aplicación implementa las siguientes medidas de seguridad:

  • ✅ API key protegida en el servidor (NO expuesta al cliente)
  • ✅ API Route proxy para todas las llamadas a Dolibarr
  • ✅ Variables de entorno seguras
  • ✅ Validación de datos de entrada
  • ✅ Validación de token contra Dolibarr en cada request
  • ✅ Sin caché de datos en servidor (evita datos antiguos)

✅ Estados de Proyecto

  • 0 - Borrador
  • 1 - Activo
  • 2 - Cerrado

📖 Documentación Adicional

🐛 Troubleshooting

Error: "Cannot connect to Dolibarr"

  • Verifica que Dolibarr esté corriendo
  • Revisa la URL en .env.local
  • Comprueba que la API esté habilitada en Dolibarr

Me pide login constantemente / No veo datos

  • Si Dolibarr está apagado, el middleware fuerza login y no hay datos
  • Asegúrate de tener Docker levantado y Dolibarr accesible en http://localhost:8200

No se muestran proyectos

  • Ejecuta npm run seed para crear datos de prueba
  • Verifica las credenciales de la API
  • Revisa la consola del navegador para errores

Modo oscuro no funciona

  • Limpia la caché del navegador
  • Verifica que ThemeProvider esté envolviendo la app

📝 Credenciales de Dolibarr (Demo)

username: admin password: p4ssw0rd

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

  1. Fork el proyecto
  2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
  3. Commit tus cambios (git commit -m 'Add: AmazingFeature')
  4. Push a la rama (git push origin feature/AmazingFeature)
  5. Abre un Pull Request

📄 Licencia

Este proyecto es privado y de uso interno.

Learn More

To learn more about Next.js, take a look at the following resources: