Planilla

ESTE REPOSITORIO ES UNA COPIA DEL DE GITEA. EL PRINCIPAL ES EL DE GITEA Sistema de gestión de planillas compuesto por:

• Base de datos: PostgreSQL
• API: Express + Node.js (módulo api)
• Interfaz de usuario: Vue 3 + Vite (módulo ui)
• Orquestación: Docker Compose
• Proxy y SSL: nginx-proxy-manager (red principal)

---

📂 Estructura del proyecto

planilla/
├─ .gitea/workflows/build.yml    # CI/CD: build + push + deploy
├─ api/                          # servicio API
│   ├─ Dockerfile
│   ├─ package.json
│   └─ server.js
├─ ui/                           # frontend Vue 3
│   ├─ Dockerfile
│   ├─ index.html
│   ├─ src/
│   └─ vite.config.js
├─ Dockerfile                    # imagen raíz (si aplica)
├─ docker-compose.yml            # orquestación de todos los servicios
└─ README.md                     # este documento

---

📝 Requisitos

• Docker (v20+)
• Docker Compose (v2+)
• Node.js (v18+) y npm para desarrollo local
• Acceso a red app-net y principal en Docker

---

⚙️ Variables de entorno

Si querés cambiar credenciales, editá directamente en docker-compose.yml o usá un .env:

COMPOSE_PROJECT_NAME=planilla
POSTGRES_USER=usuario
POSTGRES_PASSWORD=clave
POSTGRES_DB=midb

---

🚀 Levantando los servicios

1. Clonar repo

git clone https://gitea.interno.com/nucleo000/planilla.git cd planilla

2. **Construir y levantar**
   ```bash
docker compose up -d --build

3. Ver logs

docker compose logs -f api ui

4. **Detener todo**
   ```bash
docker compose down --remove-orphans

---

📡 Acceso a la aplicación

• La UI no expone puertos en el host. En Nginx Proxy Manager (red principal):

  • Domino: planilla.midominio.com
  • Scheme: http
  • Forward Hostname: planilla-ui (o ui si así lo nombraste)
  • Forward Port: 80

  Después podés habilitar SSL Let’s Encrypt desde la pestaña SSL.

• La API corre internamente en planilla-api:4000 y no se expone externamente. Vu hace proxy la UI o clientes internos.

---

🗄️ Detalles de cada servicio

Base de datos (db)

• Imagen: postgres:15
• Volumen persistente: db_data
• Credenciales en docker-compose.yml.

API (api)

• Framework: Express

• DB: pg (Pool)

• Endpoints:

  • GET /api/items → devuelve items desde Postgres.

• Arranca en puerto 4000 internamente.

• Código principal en api/server.js.

Aviso: si ves SyntaxError al usar import, asegurate de tener en api/package.json:

{
  "type": "module"
}

UI (ui)

• Framework: Vue 3 + Vite
• Build: produce carpeta dist/ y se sirve con Nginx
• Arranca en puerto 80 internamente.
• Código fuente en ui/src/, configuración en vite.config.js.

Card Animation

The data cards implemented in ui/src/components/ui/NucleoDataCard.vue now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's <style scoped> section, ensuring the styles are encapsulated and don't affect other elements.

---

📦 CI/CD (.gitea/workflows/build.yml)

1. build: construye imágenes planilla, planilla-api, planilla-ui, taggea con SHA y latest.
2. push: envía imágenes al registry gitea.interno.com.
3. deploy: conecta al registry, baja imágenes y hace docker compose up -d --build.

Asegurate de usar las credenciales correctas en el workflow.

---

💡 Buenas prácticas

• Aísla tu red interna (app-net) para que sólo los contenedores hablen entre sí.
• Exponé servicios al exterior sólo vía nginx-proxy-manager en la red principal.
• Versioná tu build.yml y mantén secretos fuera del repo (ideal: secrets.GITEA_PASSWORD).
• Usa nombres de contenedor explícitos (container_name) para identificar fácilmente.

---

🤝 Contribuciones

1. Hacé un fork y trabajá en una rama nueva.
2. Abrí PR describiendo cambios.
3. Chequeá que el CI pase y la app funcione.

---

📄 Licencia

MIT © 2025 Equipo Planilla