Fase 5: rediseño GUI-UX del portal con React + shadcn/ui

.github/workflows/ci.yml

@@ -81,3 +81,22 @@ jobs:
 
       - name: Validate Ansible
         run: make test-ansible
+
+  test-frontend:
+    runs-on: ubuntu-latest
+    needs: validate
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: portal/frontend/package-lock.json
+
+      - name: Install frontend dependencies
+        run: cd portal/frontend && npm ci
+
+      - name: Run frontend tests
+        run: cd portal/frontend && npm test

.gitignore

@@ -9,6 +9,11 @@ portal/configs/generated/
 # Variables Ansible generadas en runtime
 ansible/generated/
 
+# Build del frontend React (se regenera con npm run build en portal/frontend)
+portal/public/assets/
+portal/public/index.html
+portal/public/favicon.svg
+
 # Logs
 *.log
 

Makefile

@@ -1,12 +1,18 @@
 # NEUBAT - Makefile
 TAG ?= 1.0.0
 
-.PHONY: portal install-deps validate lint test test-smoke test-vm test-bash test-ansible validate-ansible lint-ansible build-iso release
+.PHONY: portal install-deps install-deps-frontend build-frontend validate lint test test-smoke test-vm test-bash test-ansible validate-ansible lint-ansible test-frontend build-iso release
 
 install-deps:
 	cd portal && npm install
 
-portal: install-deps
+install-deps-frontend:
+	cd portal/frontend && npm install
+
+build-frontend: install-deps-frontend
+	cd portal/frontend && npm run build
+
+portal: build-frontend
 	cd portal && npm start
 
 validate:
@@ -48,6 +54,9 @@ lint-ansible:
 
 test-ansible: validate-ansible lint-ansible
 
+test-frontend: install-deps-frontend
+	cd portal/frontend && npm test
+
 # Construir ISO híbrida con autoinstalación (requiere Docker)
 build-iso:
 	bash scripts/build-iso.sh "$(TAG)"

README.md

@@ -37,8 +37,11 @@ neubat/
 │   ├── routes/install.js      # API: creación y entrega de configs, boot iPXE
 │   ├── routes/admin.js        # API de administración
 │   ├── routes/status.js       # API: health y listado de instalaciones
-│   ├── public/index.html      # Frontend responsive (SPA ligera)
-│   └── public/admin.html      # Panel de administración
+│   ├── frontend/              # SPA React + Vite + shadcn/ui
+│   │   ├── src/pages/         # HomePage y AdminPage
+│   │   ├── src/components/ui/ # Componentes shadcn/ui
+│   │   └── package.json
+│   └── public/                # Build estático del frontend + wiki.html
 ├── netboot/
 │   ├── ipxe/neubat.ipxe       # Menú de arranque por red
 │   └── grub/loopback.cfg      # Fallback: arranque de ISO desde disco (GRUB loopback)
@@ -82,7 +85,8 @@ docker compose up -d
 O en local con Node.js:
 
 ```bash
-cd portal
+cd portal/frontend && npm install && npm run build
+cd ..
 npm install
 npm start          # http://localhost:3000
 ```

docs/ROADMAP.md

@@ -10,7 +10,8 @@
 | P1 | Endurecer sudoers post-instalación (retirar NOPASSWD) | Dev | 1h | ✅ Hecho (19-sep-2026, automático al final de `30-postinstall.sh`) |
 | P2 | Panel de administración web para seguimiento | Frontend | 8h | ✅ Hecho (19-sep-2026) |
 | P1 | Publicar release v1.0.0 con ISO híbrida en GitHub | DevOps | 1h | ✅ Hecho (20-sep-2026) |
-| P2 | Integración con Ansible para configuración post-instalación | DevOps | 6h | Pendiente |
+| P2 | Integración con Ansible para configuración post-instalación | DevOps | 6h | ✅ Hecho (20-sep-2026) |
+| P1 | Rediseño GUI-UX con React + shadcn/ui | Frontend | 10h | ✅ Hecho (20-sep-2026) |
 | P2 | Soporte de cifrado LUKS en particionado | Dev | 4h | Pendiente |
 | P3 | Snapshots btrfs automáticos pre/post actualización | Dev | 3h | Pendiente |
 

portal/Dockerfile

@@ -2,13 +2,20 @@ FROM node:20-alpine
 
 WORKDIR /app
 
-# Instalar dependencias primero para aprovechar la caché de capas
+# Backend dependencies
 COPY portal/package*.json ./portal/
 RUN cd /app/portal && npm ci --omit=dev
 
-# Copiar todo el repositorio (portal + scripts + configs)
+# Frontend dependencies
+COPY portal/frontend/package*.json ./portal/frontend/
+RUN cd /app/portal/frontend && npm ci
+
+# Copy full repo
 COPY . /app
 
+# Build React SPA into portal/public
+RUN cd /app/portal/frontend && npm run build
+
 WORKDIR /app/portal
 
 ENV NODE_ENV=production \

portal/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

portal/frontend/.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

portal/frontend/README.md

@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

portal/frontend/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

portal/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NEUBAT — Instalación desatendida de Arch Linux</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>