This commit standardizes the user interface of the 'empleados' and 'chat'
modules to improve overall UI consistency with other modules like 'planillas'.
Key changes include:
Empleados Module:
- `EmpleadosIndex.vue`:
- Header style (title, create button) aligned with `PlanillasIndex.vue`.
- Consistent use of `var(--accent-color-empleados)`.
- Standardized button hover/focus styles.
- Adjusted layout, spacing, and informational messages (loading, error, no-data)
to match `PlanillasIndex.vue`.
- `cardEmpleado.vue`:
- Ensured consistent use of `var(--accent-color-empleados)`.
- Standardized 'Edit' button styles.
- Removed 'View Details' button for consistency (Edit serves both purposes).
- Added a 'Delete' button with confirmation, similar to `cardPlanilla.vue`.
- `tablaEmpleados.vue`:
- Ensured consistent use of `var(--accent-color-empleados)` for table elements.
- Standardized 'Edit' button styles.
- Removed 'View Details' button.
- Added a 'Delete' button with confirmation.
- Edit action now emits an event, handled by the parent.
Chat Module (`CanvasChat.vue`):
- Replaced hardcoded teal colors with a new global CSS variable
`--accent-color-chat`.
- Input field and send button styles updated for better consistency with
other form elements, including hover and focus effects.
- Scrollbar colors now use the `--accent-color-chat` variable.
Global Changes:
- `ui/src/style.css`:
- Added global CSS variables for accent colors for `empleados`, `chat`,
and `planillas` (e.g., `--accent-color-empleados`, `--accent-color-chat`)
and their corresponding RGB versions (e.g., `--accent-color-empleados-rgb`).
- Standardized existing accent colors for `asistencias` and `tareas` to
use the new `rgb(var(...-rgb))` pattern.
- `ui/src/stores/useUi.js`:
- Set `defaultViewEmpleados` to 'card' for consistency.
Testing:
- I attempted to run automated tests, but they timed out in the execution environment. The changes are based on successful execution and code review.
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-netyprincipalen 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
-
Clonar repo
git clone https://gitea.interno.com/nucleo000/planilla.git cd planilla
2. **Construir y levantar**
```bash
docker compose up -d --build
-
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(ouisi así lo nombraste) - Forward Port:
80
Después podés habilitar SSL Let’s Encrypt desde la pestaña SSL.
- Domino:
-
La API corre internamente en
planilla-api:4000y 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→ devuelveitemsdesde Postgres.
-
Arranca en puerto 4000 internamente.
-
Código principal en
api/server.js.
Aviso: si ves
SyntaxErroral usarimport, asegurate de tener enapi/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 envite.config.js.
📦 CI/CD (.gitea/workflows/build.yml)
- build: construye imágenes
planilla,planilla-api,planilla-ui, taggea con SHA ylatest. - push: envía imágenes al registry
gitea.interno.com. - 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-manageren la redprincipal. - Versioná tu
build.ymly mantén secretos fuera del repo (ideal:secrets.GITEA_PASSWORD). - Usa nombres de contenedor explícitos (
container_name) para identificar fácilmente.
🤝 Contribuciones
- Hacé un fork y trabajá en una rama nueva.
- Abrí PR describiendo cambios.
- Chequeá que el CI pase y la app funcione.
📄 Licencia
MIT © 2025 Equipo Planilla