![Preview](preview.png) ## 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** ```bash git clone cd trello_fake ``` 2. **Instalar dependencias** ```bash npm install ``` 3. **Levantar Dolibarr con Docker** ```bash 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 4. **Habilitar API REST y generar API Key** En Dolibarr: - Configuración > Módulos/Aplicaciones > **API REST** - Configuración > API REST > Generar API Key 5. **Configurar variables de entorno** Crea un archivo `.env.local` en la raíz: ```bash # 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 ``` 6. **Iniciar el servidor de desarrollo** ```bash npm run dev ``` Abre [http://localhost:3000](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: ```bash # 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](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 ```bash 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 --- ## ✅ Estados de Proyecto - **0 - Borrador** - **1 - Activo** - **2 - Cerrado** --- ## 📖 Documentación Adicional - [AGENTS.md](AGENTS.md) - Guías para agentes de IA y arquitectura del proyecto - [QUICK_START.md](QUICK_START.md) - Guía rápida para levantar y usar el proyecto - [scripts/README.md](scripts/README.md) - Documentación de scripts de utilidad --- ## 🐛 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 ### 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: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - [Dolibarr API Documentation](https://wiki.dolibarr.org/index.php/Module_Web_Services_API_REST_(v1)) - Dolibarr REST API reference.