# 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`:

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

---

## 🚀 Levantando los servicios

1. **Clonar repo**

   ```bash
   ```

git clone [https://gitea.interno.com/nucleo000/planilla.git](https://gitea.interno.com/nucleo000/planilla.git)
cd planilla

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

3. **Ver logs**

   ```bash
   ```

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`:
>
> ```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`.

### Notificaciones en tiempo real (SSE)

El backend expone un endpoint `/events` que utiliza **Server-Sent Events**. La
base de datos PostgreSQL emite mensajes mediante triggers en las tablas
`Planilla`, `Cliente`, `TareaRealizada` y `Asistencia`. Cada cambio se
reenvía automáticamente a los navegadores conectados.

```javascript
const source = new EventSource('http://localhost:4000/events');
source.onmessage = (e) => {
  const data = JSON.parse(e.data);
  console.log('Evento recibido', data);
};
```

#### 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