@softdin/portal-admin 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,96 @@
-# Temporary Holding Version
+# softdin-portal-central — Administración del portal
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+App web de RRHH de cada cliente del **Portal de autogestión**:
+
+- **Solicitudes:** bandeja y visto bueno de nómina.
+- **Empleados:** estado de la cuenta e invitación por QR o correo.
+- **Tipos de solicitud:** cuáles puede radicar el empleado y si exigen visto bueno.
+
+Habla solo con **Gestión del Portal** (`softdin-portal-api`, rutas `/api/v1/rrhh`). No usa los usuarios de SoftDIN:
+
+- Los usuarios de RRHH viven en la central del portal y los crea `php artisan portal:usuario`.
+- Cada usuario fija su contraseña con el enlace que le llega al correo (`/restablecer`).
+- La sesión queda ligada a un cliente; quien tiene varios cambia desde la barra superior.
+
+El visto bueno es lo único que toca SoftDIN, y viaja firmado de servidor a servidor desde el API del portal.
+
+## Desarrollo
+
+```bash
+npm install
+npm run dev     # http://localhost:5177
+npm test
+npm run build
+```
+
+`VITE_API_URL` (en `.env`, ver `.env.example`) apunta al API del portal. En el API, `PORTAL_RRHH_URL` debe apuntar a esta app, porque arma con ella los enlaces de los correos, y `CORS_ALLOWED_ORIGINS` debe incluirla.
+
+Antes de subir cambios al `package-lock.json`, valídelo con npm 10.9.2 (el de Cloudflare Pages), con `npm ci` sobre una copia limpia.
+
+## Despliegue (Cloudflare Pages)
+
+El proyecto de Pages **softdin-portal-central** está conectado a este repositorio: cada push a `main`
+compila y publica en `gestionportal.dinsoft.online`; las otras ramas generan vistas previas. Configuración:
+`npm run build`, salida `dist`, variable `VITE_API_URL=https://apiportal.dinsoft.shop/api/v1`.
+No hace falta subir nada a mano con wrangler.
+
+## Paquete `@softdin/portal-admin`
+
+Las pantallas del portal también se publican como módulo para montarlas en otra app Vue. Lo
+usan **esta misma app** (en la raíz, con su ingreso de usuario y contraseña) y
+**softdin-central** (en `/central/portal`, con ingreso SSO de superusuarios): un solo código.
+
+```ts
+import { instalarPortalAdmin } from '@softdin/portal-admin'
+import '@softdin/portal-admin/style.css'
+
+// Con Pinia instalada y antes de app.use(router).
+const portal = instalarPortalAdmin(router, {
+  apiUrl: 'https://apiportal.dinsoft.shop/api/v1', // opcional con SSO: se usa portal_api_url
+  basePath: '/central/portal',
+  rutaPadre: 'central-layout', // ruta con nombre bajo la que cuelgan (su layout y guardias)
+  metaRutas: { module: 'Portal de autogestión' },
+  sesion: { obtenerAsercion: () => miApi.post('/admin/portal/sso').then((r) => r.data) },
+  alExpirar: () => {/* no se pudo renovar */},
+  alSalir: () => router.push('/central'),
+})
+await portal.cerrarSesion() // al salir de la app anfitriona
+```
+
+- **Rutas:** nombres `portal-*` (`RUTAS_PORTAL`), con `meta.portalAdmin`; la guardia
+  (`guardiaPortalAdmin`) solo mira esas. Con `sesion` se agrega `portal-ingreso`
+  (`{basePath}/ingreso`): pide la aserción, muestra el selector si hay varios clientes y pide
+  otra aserción para el segundo paso. Sin `sesion`, sin token va a la ruta `login` de la app.
+- **Sesión:** stores `portal-auth` y `portal-cliente-interno`; cliente axios propio
+  (`portalApi`, base `${apiUrl}/rrhh`). Con `sesion`, un 401 se renueva una sola vez con una
+  aserción nueva (las peticiones simultáneas comparten la renovación) y se repite la petición.
+- **Estilos:** el paquete no trae Tailwind. La app debe escanear sus clases con
+  `@source '<ruta>/node_modules/@softdin/portal-admin/dist-lib';` en el mismo CSS donde importa
+  `@softdin/shared/style.css`, e importar `@softdin/portal-admin/style.css` (solo los
+  `<style scoped>`).
+- **pdf.js:** `pdfjs-dist` y `qrcode-generator` son dependencias del paquete; el worker se
+  importa como `pdfjs-dist/build/pdf.worker.min.mjs?url` y queda **sin resolver** en el
+  paquete, para que el Vite de la app lo copie a sus assets. La app debe poner
+  `@softdin/portal-admin` en `optimizeDeps.exclude` (esbuild no entiende `?url`).
+- **Peers:** `vue`, `vue-router`, `pinia`, `axios` y `@softdin/shared` (`^0.4.0`).
+- **Ámbito tenant (0.2.0, softdin-tenant):** `cambioDeTenant: false` (o una sesión con
+  `ambito: "tenant"`, `usePortalAuthStore().ambito`) quita de la barra el selector de tenant:
+  la sesión SSO es solo del tenant de la app. Si `rrhh/me` (o el ingreso) trae
+  `clientes_internos` con una lista, el selector «Cliente» ofrece solo esos y no «Todo el
+  tenant»; con `[]` (ninguno) ofrece solo «Todo el tenant», para consultar; con `null` o sin
+  el campo, como antes. Tampoco ofrece los que `GET rrhh/clientes-internos` marca
+  `permitido: false` (`usePortalAuthStore().clientesInternos`,
+  `usePortalClienteInternoStore().opciones`). Con SSO, si el ingreso no trae `clientes_internos`
+  se confirma con `rrhh/me`. Un 403 «No tiene acceso a ese cliente.» (escritura en un cliente
+  interno fuera del alcance) ya no cierra la sesión: lo muestra la pantalla.
+
+```bash
+npm run build:lib   # dist-lib/: ESM + style.css + types/ (sin el alias @/)
+npm pack            # tarball para probar en otra app sin publicar
+npm publish         # corre las pruebas y build:lib (prepublishOnly)
+```
+
+Las rutas que eran de esta app (`solicitudes`, `chat`, `auditoria`…) se llaman ahora
+`portal-solicitudes`, `portal-chat`, `portal-auditoria`…, y se registran en
+`src/portal-admin/rutas.ts` (ya no en `src/router/index.ts`, que se quedó con el ingreso,
+`olvide` y `restablecer`). Las direcciones no cambiaron.

package/dist-lib/chunks/AppLayout-COCPfLWo.js

@@ -0,0 +1,303 @@
+import { n as configPortal, t as useAuthStore } from "./auth.store-BrGKZg-7.js";
+import { t as useClienteInternoStore } from "./cliente-interno.store-De39VsEE.js";
+import { t as RUTAS_PORTAL } from "./tipos-D93bLfFC.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { i as chatService } from "./chat.service-C7ZQf4w3.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelSelect, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
+//#region src/components/MenuUsuario.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["aria-expanded"];
+var _hoisted_2$1 = { class: "info" };
+var _hoisted_3$1 = { class: "nombre" };
+var _hoisted_4$1 = { class: "tenant" };
+var _hoisted_5$1 = {
+	class: "avatar",
+	"aria-hidden": "true"
+};
+var _hoisted_6$1 = {
+	class: "chevron",
+	"aria-hidden": "true"
+};
+var _hoisted_7$1 = { class: "cabecera" };
+var _hoisted_8$1 = {
+	class: "avatar avatar-grande",
+	"aria-hidden": "true"
+};
+var _hoisted_9$1 = { class: "min-w-0" };
+var _hoisted_10$1 = { class: "panel-nombre" };
+var _hoisted_11$1 = { class: "panel-dato" };
+var _hoisted_12$1 = { class: "contexto" };
+//#endregion
+//#region src/components/MenuUsuario.vue
+var MenuUsuario_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "MenuUsuario",
+	setup(__props) {
+		const auth = useAuthStore();
+		const clientesInternos = useClienteInternoStore();
+		const router = useRouter();
+		const route = useRoute();
+		const abierto = ref(false);
+		const raiz = ref(null);
+		const disparador = ref(null);
+		const panel = ref(null);
+		const iniciales = computed(() => {
+			return (auth.usuario?.nombre?.trim() ?? "").split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("") || "RH";
+		});
+		function opciones() {
+			return Array.from(panel.value?.querySelectorAll("[role=\"menuitem\"]") ?? []);
+		}
+		async function abrir() {
+			abierto.value = true;
+			await nextTick();
+			opciones()[0]?.focus();
+		}
+		function cerrar(devolverFoco = false) {
+			if (!abierto.value) return;
+			abierto.value = false;
+			if (devolverFoco) disparador.value?.focus();
+		}
+		function alternar() {
+			if (abierto.value) cerrar();
+			else abrir();
+		}
+		/** Flechas entre las opciones del menú; Escape lo cierra y devuelve el foco al botón. */
+		function teclado(e) {
+			if (!abierto.value) return;
+			if (e.key === "Escape") {
+				e.preventDefault();
+				cerrar(true);
+				return;
+			}
+			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			const lista = opciones();
+			if (!lista.length) return;
+			e.preventDefault();
+			lista[(lista.indexOf(document.activeElement) + (e.key === "ArrowDown" ? 1 : -1) + lista.length) % lista.length]?.focus();
+		}
+		function clicAfuera(e) {
+			if (abierto.value && raiz.value && !raiz.value.contains(e.target)) cerrar();
+		}
+		async function salir() {
+			cerrar();
+			await auth.logout();
+			if (configPortal.alSalir) configPortal.alSalir();
+			else await router.replace({ name: "login" });
+		}
+		watch(() => route.fullPath, () => cerrar());
+		onMounted(() => document.addEventListener("click", clicAfuera));
+		onBeforeUnmount(() => document.removeEventListener("click", clicAfuera));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "raiz",
+				ref: raiz,
+				class: "menu-usuario",
+				onKeydown: teclado
+			}, [createElementVNode("button", {
+				ref_key: "disparador",
+				ref: disparador,
+				type: "button",
+				class: "disparador",
+				"aria-label": "Abrir menú de usuario",
+				"aria-haspopup": "menu",
+				"aria-expanded": abierto.value,
+				"aria-controls": "menu-usuario-panel",
+				onClick: withModifiers(alternar, ["stop"])
+			}, [
+				createElementVNode("span", _hoisted_2$1, [createElementVNode("span", _hoisted_3$1, toDisplayString(unref(auth).usuario?.nombre), 1), createElementVNode("span", _hoisted_4$1, toDisplayString(unref(auth).cliente?.nombre), 1)]),
+				createElementVNode("span", _hoisted_5$1, toDisplayString(iniciales.value), 1),
+				createElementVNode("span", _hoisted_6$1, toDisplayString(abierto.value ? "▴" : "▾"), 1)
+			], 8, _hoisted_1$1), abierto.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: "menu-usuario-panel",
+				ref_key: "panel",
+				ref: panel,
+				class: "panel",
+				role: "menu",
+				"aria-label": "Opciones de usuario"
+			}, [
+				createElementVNode("div", _hoisted_7$1, [createElementVNode("span", _hoisted_8$1, toDisplayString(iniciales.value), 1), createElementVNode("div", _hoisted_9$1, [createElementVNode("p", _hoisted_10$1, toDisplayString(unref(auth).usuario?.nombre), 1), createElementVNode("p", _hoisted_11$1, toDisplayString(unref(auth).usuario?.email), 1)])]),
+				createElementVNode("dl", _hoisted_12$1, [createElementVNode("div", null, [_cache[0] || (_cache[0] = createElementVNode("dt", null, "Tenant", -1)), createElementVNode("dd", null, toDisplayString(unref(auth).cliente?.nombre ?? "—"), 1)]), createElementVNode("div", null, [_cache[1] || (_cache[1] = createElementVNode("dt", null, "Cliente", -1)), createElementVNode("dd", null, toDisplayString(unref(clientesInternos).nombre(unref(clientesInternos).seleccionado)), 1)])]),
+				createElementVNode("div", { class: "acciones" }, [createElementVNode("button", {
+					type: "button",
+					role: "menuitem",
+					class: "accion accion-peligro",
+					onClick: salir
+				}, "Salir")])
+			], 512)) : createCommentVNode("", true)], 544);
+		};
+	}
+}), [["__scopeId", "data-v-e5b2d0eb"]]);
+//#endregion
+//#region src/components/AppLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-h-full bg-surface" };
+var _hoisted_2 = { class: "bg-sidebar text-white" };
+var _hoisted_3 = { class: "mx-auto flex max-w-6xl flex-wrap items-center gap-3 px-4 py-3" };
+var _hoisted_4 = {
+	key: 0,
+	class: "text-sm"
+};
+var _hoisted_5 = ["value", "disabled"];
+var _hoisted_6 = ["value"];
+var _hoisted_7 = {
+	key: 1,
+	class: "text-sm text-brand-100"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "flex min-w-0 items-center gap-2 text-sm",
+	for: "barra-cliente-interno"
+};
+var _hoisted_9 = {
+	key: 0,
+	value: null,
+	class: "text-slate-900"
+};
+var _hoisted_10 = ["value"];
+var _hoisted_11 = {
+	class: "mx-auto flex max-w-6xl gap-1 overflow-x-auto px-4",
+	"aria-label": "Secciones"
+};
+var _hoisted_12 = ["aria-label"];
+var _hoisted_13 = { class: "mx-auto max-w-6xl px-4 py-6" };
+//#endregion
+//#region src/components/AppLayout.vue
+var AppLayout_default = /* @__PURE__ */ defineComponent({
+	__name: "AppLayout",
+	setup(__props) {
+		const auth = useAuthStore();
+		const clientesInternos = useClienteInternoStore();
+		const router = useRouter();
+		const cambiando = ref(false);
+		clientesInternos.cargar();
+		/** Selector «Cliente» de la barra: lo usan todas las pestañas (null = todo el tenant). */
+		const clienteInterno = computed({
+			get: () => clientesInternos.seleccionado,
+			set: (id) => clientesInternos.elegir(id)
+		});
+		/** El portal-api responde 403 a `cambiar-cliente` en una sesión de ámbito tenant. */
+		const puedeCambiarTenant = computed(() => configPortal.cambioDeTenant && auth.ambito !== "tenant" && auth.clientes.length > 1);
+		const pestanas = [
+			{
+				to: { name: RUTAS_PORTAL.solicitudes },
+				texto: "Solicitudes"
+			},
+			{
+				to: { name: RUTAS_PORTAL.certificados },
+				texto: "Certificados"
+			},
+			{
+				to: { name: RUTAS_PORTAL.empleados },
+				texto: "Empleados"
+			},
+			{
+				to: { name: RUTAS_PORTAL.tiposSolicitud },
+				texto: "Tipos de solicitud"
+			},
+			{
+				to: { name: RUTAS_PORTAL.homologacion },
+				texto: "Homologación"
+			},
+			{
+				to: { name: RUTAS_PORTAL.carnet },
+				texto: "Carnet digital"
+			},
+			{
+				to: { name: RUTAS_PORTAL.cartelera },
+				texto: "Cartelera"
+			}
+		];
+		const chat = ref(null);
+		const pendientesChat = computed(() => chat.value ? chat.value.sin_asignar + chat.value.no_leidas : 0);
+		async function consultarChat() {
+			try {
+				chat.value = await chatService.resumen();
+			} catch {}
+		}
+		let reloj = null;
+		onMounted(() => {
+			consultarChat();
+			reloj = setInterval(() => void consultarChat(), 3e4);
+		});
+		const quitarGuardia = router.afterEach(() => void consultarChat());
+		onBeforeUnmount(quitarGuardia);
+		onBeforeUnmount(() => {
+			if (reloj) clearInterval(reloj);
+		});
+		async function cambiarCliente(e) {
+			const id = Number(e.target.value);
+			if (!id || id === auth.cliente?.id) return;
+			cambiando.value = true;
+			try {
+				await auth.cambiarCliente(id);
+				window.location.assign(configPortal.basePath);
+			} finally {
+				cambiando.value = false;
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("header", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+				_cache[3] || (_cache[3] = createElementVNode("div", { class: "min-w-0 flex-1" }, [createElementVNode("p", { class: "text-xs uppercase tracking-wider text-brand-100" }, "Portal de autogestión"), createElementVNode("h1", { class: "text-lg font-semibold" }, "Administración del portal")], -1)),
+				puedeCambiarTenant.value ? (openBlock(), createElementBlock("label", _hoisted_4, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Tenant", -1)), createElementVNode("select", {
+					value: unref(auth).cliente?.id,
+					class: "rounded-lg border border-white/30 bg-white/10 px-2 py-1 text-sm text-white",
+					disabled: cambiando.value,
+					onChange: cambiarCliente
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(auth).clientes, (c) => {
+					return openBlock(), createElementBlock("option", {
+						key: c.id,
+						value: c.id,
+						class: "text-slate-900"
+					}, toDisplayString(c.nombre), 9, _hoisted_6);
+				}), 128))], 40, _hoisted_5)])) : (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(auth).cliente?.nombre), 1)),
+				unref(auth).isAuthenticated ? (openBlock(), createElementBlock("label", _hoisted_8, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "text-brand-100" }, "Cliente", -1)), withDirectives(createElementVNode("select", {
+					id: "barra-cliente-interno",
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => clienteInterno.value = $event),
+					class: "min-w-0 max-w-[13rem] rounded-lg border border-white/30 bg-white/10 px-2 py-1 text-sm text-white sm:max-w-xs"
+				}, [!unref(clientesInternos).restringido || unref(clientesInternos).ninguno ? (openBlock(), createElementBlock("option", _hoisted_9, "Todo el tenant")) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(clientesInternos).opciones, (c) => {
+					return openBlock(), createElementBlock("option", {
+						key: c.id,
+						value: c.id,
+						class: "text-slate-900"
+					}, toDisplayString(c.nombre), 9, _hoisted_10);
+				}), 128))], 512), [[vModelSelect, clienteInterno.value]])])) : createCommentVNode("", true),
+				createVNode(MenuUsuario_default)
+			]), createElementVNode("nav", _hoisted_11, [
+				(openBlock(), createElementBlock(Fragment, null, renderList(pestanas, (p) => {
+					return createVNode(unref(RouterLink), {
+						key: p.texto,
+						to: p.to,
+						class: "whitespace-nowrap rounded-t-lg px-4 py-2 text-sm text-brand-100 hover:text-white",
+						"active-class": "!bg-surface !text-slate-900 font-semibold"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(p.texto), 1)]),
+						_: 2
+					}, 1032, ["to"]);
+				}), 64)),
+				chat.value && (chat.value.atiende || chat.value.es_admin) ? (openBlock(), createBlock(unref(RouterLink), {
+					key: 0,
+					to: { name: unref(RUTAS_PORTAL).chat },
+					class: "whitespace-nowrap rounded-t-lg px-4 py-2 text-sm text-brand-100 hover:text-white",
+					"active-class": "!bg-surface !text-slate-900 font-semibold"
+				}, {
+					default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" Chat ", -1)), pendientesChat.value > 0 ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: "ml-1 rounded-full bg-red-600 px-1.5 text-xs font-semibold text-white",
+						"aria-label": `${pendientesChat.value} por atender`
+					}, toDisplayString(pendientesChat.value), 9, _hoisted_12)) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, ["to"])) : createCommentVNode("", true),
+				unref(auth).esAdmin ? (openBlock(), createBlock(unref(RouterLink), {
+					key: 1,
+					to: { name: unref(RUTAS_PORTAL).auditoria },
+					class: "whitespace-nowrap rounded-t-lg px-4 py-2 text-sm text-brand-100 hover:text-white",
+					"active-class": "!bg-surface !text-slate-900 font-semibold"
+				}, {
+					default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" Auditoría ", -1)])]),
+					_: 1
+				}, 8, ["to"])) : createCommentVNode("", true)
+			])]), createElementVNode("main", _hoisted_13, [createVNode(unref(RouterView))])]);
+		};
+	}
+});
+//#endregion
+export { AppLayout_default as default };