trello_fake/README.md

![Preview](image.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 <tu-repo>
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.