# Verificar JDK 21
java --version
# Debe mostrar: java 21.x.x
# Verificar Maven
mvn --version
# Debe mostrar: Apache Maven 3.9.x
# Verificar PostgreSQL
psql --version
# Debe mostrar: psql (PostgreSQL) 12 o superior

# Navegar al directorio de Tomcat
cd C:\apache-tomcat-10.1.x\bin
# Iniciar servidor
startup.bat
# Verificar en: http://localhost:8080

-- Crear base de datos
CREATE DATABASE inventario_db;

-- Conectar a la base de datos
\c inventario_db

-- Tabla de Roles
CREATE TABLE roles (
    id SERIAL PRIMARY KEY,
    nombre VARCHAR(50) NOT NULL UNIQUE,
    descripcion VARCHAR(200),
    estado BOOLEAN DEFAULT TRUE,
    fecha_creacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insertar roles
INSERT INTO roles (nombre, descripcion) VALUES
    ('Administrador', 'Acceso completo al sistema'),
    ('Cliente', 'Acceso limitado para consultas'),
    ('Invitado', 'Acceso de solo lectura');

-- Tabla de Usuarios
CREATE TABLE usuarios (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    nombre_completo VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    rol_id INTEGER NOT NULL,
    CONSTRAINT fk_usuarios_roles FOREIGN KEY (rol_id)
        REFERENCES roles(id),
    estado BOOLEAN DEFAULT TRUE,
    fecha_creacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insertar usuarios (password: admin123)
INSERT INTO usuarios (username, password, nombre_completo, email, rol_id) VALUES
    ('admin', '$2a$10$N9qo8uLOickgx2ZMRZoMye...', 'Administrador', 'admin@sena.edu.co', 1),
    ('cliente1', '$2a$10$N9qo8uLOickgx2ZMRZoMye...', 'Juan Pérez', 'juan@sena.edu.co', 2);

-- Tabla de Productos
CREATE TABLE productos (
    id SERIAL PRIMARY KEY,
    codigo VARCHAR(50) NOT NULL UNIQUE,
    nombre VARCHAR(100) NOT NULL,
    descripcion TEXT,
    precio DECIMAL(10,2) NOT NULL CHECK (precio >= 0),
    stock INTEGER NOT NULL DEFAULT 0 CHECK (stock >= 0),
    categoria VARCHAR(50),
    estado BOOLEAN DEFAULT TRUE,
    fecha_registro TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insertar productos de ejemplo
INSERT INTO productos (codigo, nombre, descripcion, precio, stock, categoria) VALUES
    ('PROD-001', 'Laptop HP Pavilion', 'Laptop 15.6" Intel Core i5 8GB', 2500000.00, 15, 'Tecnología'),
    ('PROD-002', 'Mouse Logitech M185', 'Mouse inalámbrico', 45000.00, 50, 'Accesorios'),
    ('PROD-003', 'Teclado Mecánico Redragon', 'Teclado mecánico RGB', 180000.00, 30, 'Accesorios'),
    ('PROD-004', 'Monitor Samsung 24"', 'Monitor Full HD IPS', 650000.00, 20, 'Tecnología'),
    ('PROD-005', 'Audífonos Sony WH-1000XM4', 'Audífonos con cancelación de ruido', 1200000.00, 25, 'Audio');

inventario-mvc/
├── pom.xml
├── src/main/
│   ├── java/com/sena/inventario/
│   │   ├── modelo/
│   │   │   ├── Rol.java
│   │   │   ├── Usuario.java
│   │   │   └── Producto.java
│   │   ├── dao/
│   │   │   ├── ConexionDB.java
│   │   │   ├── RolDAO.java
│   │   │   ├── UsuarioDAO.java
│   │   │   └── ProductoDAO.java
│   │   ├── controlador/
│   │   │   ├── LoginServlet.java
│   │   │   ├── ProductoServlet.java
│   │   │   └── UsuarioServlet.java
│   │   └── util/
│   │       └── PasswordUtil.java
│   ├── resources/
│   │   └── db.properties
│   └── webapp/
│       ├── WEB-INF/
│       │   └── web.xml
│       ├── productos/
│       │   ├── lista.jsp
│       │   └── formulario.jsp
│       ├── usuarios/
│       │   ├── lista.jsp
│       │   └── formulario.jsp
│       ├── css/
│       │   └── estilo.css
│       ├── index.jsp
│       └── login.jsp
└── Dockerfile

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.sena.inventario</groupId>
    <artifactId>inventario-mvc</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>
    <properties>
        <maven.compiler.source>21</maven.compiler.source>
        <maven.compiler.target>21</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <!-- Jakarta Servlet API -->
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>6.0.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- Jakarta JSTL -->
        <dependency>
            <groupId>jakarta.servlet.jsp.jstl</groupId>
            <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
            <version>3.0.0</version>
        </dependency>
        <!-- PostgreSQL JDBC Driver -->
        <dependency>
            <groupId>org.postgresql</groupId>
            <artifactId>postgresql</artifactId>
            <version>42.7.1</version>
        </dependency>
        <!-- BCrypt para contraseñas -->
        <dependency>
            <groupId>at.favre.lib</groupId>
            <artifactId>bcrypt</artifactId>
            <version>0.10.2</version>
        </dependency>
    </dependencies>
</project>

package com.sena.inventario.modelo;

import java.math.BigDecimal;
import java.time.LocalDateTime;

public record Producto(
    int id,
    String codigo,
    String nombre,
    String descripcion,
    BigDecimal precio,
    int stock,
    String categoria,
    boolean estado,
    LocalDateTime fechaRegistro,
    LocalDateTime fechaActualizacion
) {
    public Producto(
        String codigo, String nombre, String descripcion,
        BigDecimal precio, int stock, String categoria
    ) {
        this(0, codigo, nombre, descripcion, precio, stock, categoria,
             true, LocalDateTime.now(), LocalDateTime.now());
    }
}

package com.sena.inventario.dao;

import com.sena.inventario.modelo.Producto;
import java.math.BigDecimal;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ProductoDAO {

    private static final String SQL_INSERT =
        "INSERT INTO productos (codigo, nombre, descripcion, precio, stock, categoria) " +
        "VALUES (?, ?, ?, ?, ?, ?)";

    private static final String SQL_SELECT_ALL =
        "SELECT * FROM productos ORDER BY id";

    private static final String SQL_SELECT_BY_ID =
        "SELECT * FROM productos WHERE id = ?";

    private static final String SQL_UPDATE =
        "UPDATE productos SET codigo=?, nombre=?, descripcion=?, precio=?, " +
        "stock=?, categoria=?, estado=? WHERE id=?";

    private static final String SQL_DELETE =
        "DELETE FROM productos WHERE id = ?";

    // ---------- CREATE ----------
    public boolean insertar(Producto producto) {
        try (Connection conn = ConexionDB.conectar();
             PreparedStatement ps = conn.prepareStatement(SQL_INSERT)) {
            ps.setString(1, producto.codigo());
            ps.setString(2, producto.nombre());
            ps.setString(3, producto.descripcion());
            ps.setBigDecimal(4, producto.precio());
            ps.setInt(5, producto.stock());
            ps.setString(6, producto.categoria());
            return ps.executeUpdate() > 0;
        } catch (SQLException e) {
            e.printStackTrace();
            return false;
        }
    }

    // ---------- READ / LIST ----------
    public List<Producto> listarTodos() {
        List<Producto> productos = new ArrayList<>();
        try (Connection conn = ConexionDB.conectar();
             Statement stmt = conn.createStatement();
             ResultSet rs = stmt.executeQuery(SQL_SELECT_ALL)) {
            while (rs.next()) {
                productos.add(new Producto(
                    rs.getInt("id"),
                    rs.getString("codigo"),
                    rs.getString("nombre"),
                    rs.getString("descripcion"),
                    rs.getBigDecimal("precio"),
                    rs.getInt("stock"),
                    rs.getString("categoria"),
                    rs.getBoolean("estado"),
                    rs.getTimestamp("fecha_registro").toLocalDateTime(),
                    rs.getTimestamp("fecha_actualizacion").toLocalDateTime()
                ));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return productos;
    }

    // ---------- UPDATE ----------
    public boolean actualizar(Producto producto) {
        try (Connection conn = ConexionDB.conectar();
             PreparedStatement ps = conn.prepareStatement(SQL_UPDATE)) {
            ps.setString(1, producto.codigo());
            ps.setString(2, producto.nombre());
            ps.setString(3, producto.descripcion());
            ps.setBigDecimal(4, producto.precio());
            ps.setInt(5, producto.stock());
            ps.setString(6, producto.categoria());
            ps.setBoolean(7, producto.estado());
            ps.setInt(8, producto.id());
            return ps.executeUpdate() > 0;
        } catch (SQLException e) {
            e.printStackTrace();
            return false;
        }
    }

    // ---------- DELETE ----------
    public boolean eliminar(int id) {
        try (Connection conn = ConexionDB.conectar();
             PreparedStatement ps = conn.prepareStatement(SQL_DELETE)) {
            ps.setInt(1, id);
            return ps.executeUpdate() > 0;
        } catch (SQLException e) {
            e.printStackTrace();
            return false;
        }
    }
}

package com.sena.inventario.controlador;

import com.sena.inventario.dao.ProductoDAO;
import com.sena.inventario.modelo.Producto;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.math.BigDecimal;
import java.util.List;

@WebServlet("/productos")
public class ProductoServlet extends HttpServlet {

    private final ProductoDAO dao = new ProductoDAO();

    // --- GET: listar, nuevo, editar, eliminar ---
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        String accion = req.getParameter("accion");
        if (accion == null) accion = "listar";
        switch (accion) {
            case "nuevo" -> mostrarFormularioNuevo(req, res);
            case "editar" -> mostrarFormularioEditar(req, res);
            case "eliminar" -> eliminarProducto(req, res);
            default -> listarProductos(req, res);
        }
    }

    // --- POST: guardar producto ---
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        if ("guardar".equals(req.getParameter("accion")))
            guardarProducto(req, res);
    }

    // --- Listar todos los productos ---
    private void listarProductos(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        req.setAttribute("productos", dao.listarTodos());
        req.getRequestDispatcher("/productos/lista.jsp").forward(req, res);
    }

    // --- Mostrar formulario nuevo ---
    private void mostrarFormularioNuevo(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        req.setAttribute("modo", "crear");
        req.getRequestDispatcher("/productos/formulario.jsp").forward(req, res);
    }

    // --- Mostrar formulario editar ---
    private void mostrarFormularioEditar(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        int id = Integer.parseInt(req.getParameter("id"));
        Producto p = dao.buscarPorId(id);
        if (p == null) {
            req.setAttribute("error", "Producto no encontrado");
            listarProductos(req, res);
            return;
        }
        req.setAttribute("producto", p);
        req.setAttribute("modo", "editar");
        req.getRequestDispatcher("/productos/formulario.jsp").forward(req, res);
    }

    // --- Guardar (crear o actualizar) ---
    private void guardarProducto(HttpServletRequest req, HttpServletResponse res)
            throws IOException {
        String id = req.getParameter("id");
        String codigo = req.getParameter("codigo");
        String nombre = req.getParameter("nombre");
        String descripcion = req.getParameter("descripcion");
        BigDecimal precio = new BigDecimal(req.getParameter("precio"));
        int stock = Integer.parseInt(req.getParameter("stock"));
        String categoria = req.getParameter("categoria");

        if (id == null || id.isEmpty()) {
            dao.insertar(new Producto(
                codigo, nombre, descripcion, precio, stock, categoria));
        } else {
            boolean estado = "on".equals(req.getParameter("estado"));
            dao.actualizar(new Producto(
                Integer.parseInt(id), codigo, nombre, descripcion,
                precio, stock, categoria, estado, LocalDateTime.now(),
                LocalDateTime.now()));
        }
        res.sendRedirect(req.getContextPath() + "/productos");
    }

    // --- Eliminar producto por ID ---
    private void eliminarProducto(HttpServletRequest req, HttpServletResponse res)
            throws IOException {
        dao.eliminar(Integer.parseInt(req.getParameter("id")));
        res.sendRedirect(req.getContextPath() + "/productos");
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista de Productos</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Código</th>
                <th>Nombre</th>
                <th>Precio</th>
                <th>Stock</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="producto" items="${productos}">
                <tr>
                    <td><c:out value="${producto.codigo}" /></td>
                    <td><c:out value="${producto.nombre}" /></td>
                    <td>$<c:out value="${producto.precio}" /></td>
                    <td><c:out value="${producto.stock}" /></td>
                    <td>
                        <a href="productos?accion=editar&id=${producto.id}">Editar</a>
                        <a href="productos?accion=eliminar&id=${producto.id}">Eliminar</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</body>
</html>

# Ejecute el script en la raíz del proyecto
# para automatizar puertos, base de datos y Tomcat:
.\run-project-jsp.ps1

# 1. Ingrese a la carpeta del código de ejemplo
cd recursos/codigo-ejemplo
# 2. Compile e inicie el servidor Tomcat incrustado
mvn clean package cargo:run
# 3. Abra su navegador en: http://localhost:8080/inventario-mvc-1.0/

# 1. Compile y empaquete el archivo WAR
cd recursos/codigo-ejemplo
mvn clean package

# 2. Copie el archivo WAR a la carpeta webapps de Tomcat
copy target\inventario-mvc-1.0.war C:\apache-tomcat-10.1.x\webapps\

# 3. Reinicie el servidor Tomcat
C:\apache-tomcat-10.1.x\bin\shutdown.bat
C:\apache-tomcat-10.1.x\bin\startup.bat

# Crear proyecto con Vite + React template
npm create vite@latest frontend-inventario -- --template react
# Resultado:
# ✔ Project name: frontend-inventario
# ✔ Template: react
# Done. Now run:
#   cd frontend-inventario
#   npm install
#   npm run dev
# Instalar dependencias adicionales
cd frontend-inventario
npm install
npm install axios react-router-dom
# Iniciar en desarrollo
npm run dev
# Resultado esperado:
#   VITE v5.4.0  ready in 250ms
#   ➜  Local:   http://localhost:5173/
#   ➜  Network: http://192.168.1.10:5173/
#   ➜  press h + enter to show help

frontend-inventario/
├── .env / .env.example         # VITE_API_URL=http://localhost:8000/api
├── src/
│   ├── contexts/
│   │   └── AuthContext.jsx       # Estado global de auth + JWT
│   ├── services/
│   │   └── api.js                # Axios + Interceptor JWT + env vars
│   ├── components/
│   │   ├── Navbar.jsx            # Barra con user/login/logout
│   │   ├── ProtectedRoute.jsx    # Guard de rutas (roles)
│   │   ├── ProductoCard.jsx      # Tarjeta (como fragmento JSP)
│   │   ├── ProductoLista.jsx     # Lista (como lista.jsp)
│   │   └── ProductoForm.jsx      # Formulario crear/editar
│   ├── pages/
│   │   ├── Login.jsx             # Login con JWT
│   │   ├── Register.jsx          # Registro de usuarios
│   │   └── AdminUsuarios.jsx     # Admin: CRUD usuarios
│   ├── App.jsx                   # Raíz + AuthProvider + Rutas
│   ├── App.css                   # Estilos globales
│   └── main.jsx                  # Punto de entrada
├── index.html
├── vite.config.js
└── package.json

# Las variables VITE_ son expuestas automáticamente por Vite
# .env (copiar de .env.example)
VITE_API_URL=http://localhost:8000/api

# En el código:
# const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api'

┌──────────┐    POST /api/auth/login    ┌──────────┐
│  React   │ ──── {username, password} ──→│ FastAPI  │
│  Login   │                              │  Auth    │
│  Page    │ ←── {access_token, usuario}──│  Router  │
└──────────┘                              └──────────┘
     │                                         │
     │  localStorage.setItem(                   │  jwt.encode(
     │    "access_token", token)                │    {"sub": user, "rol": "Admin"}
     │  localStorage.setItem(                   │  )
     │    "usuario", JSON.stringify(user))      │
     ▼                                         ▼
┌──────────┐    GET /api/productos/       ┌──────────┐
│  React   │ ──── Authorization: Bearer ──→│ FastAPI  │
│  Axios   │        <token>               │  Router  │
│  Interceptor│                            │  valida  │
│  (automático)│ ←── JSON(productos) ──────│  JWT     │
└──────────┘                              └──────────┘

# Eliminar archivos de ejemplo que Vite crea
# Windows: del src\App.css src\index.css src\assets\react.svg
# Linux/Mac: rm src/App.css src/index.css src/assets/react.svg
Remove-Item src/App.css, src/index.css, src/assets/react.svg
# Crear directorios para nuestros componentes
mkdir src/services, src/components
# Resultado final:
# src/
# ├── App.jsx        # Vamos a editar
# ├── main.jsx       # Se mantiene igual
# ├── services/
# │   └── api.js     # Servicio API
# └── components/
#     ├── Navbar.jsx
#     ├── ProductoCard.jsx
#     ├── ProductoLista.jsx
#     └── ProductoForm.jsx

import axios from 'axios';

// URL base de nuestra API FastAPI
// Equivalente a db.properties → URL de conexión
const API_URL = 'http://localhost:8000/api';
const api = axios.create({
    baseURL: API_URL,
    headers: {
        'Content-Type': 'application/json'
    },
});

// ===== CRUD Productos =====
// Equivalente a ProductoDAO.java pero con promesas
export const listarProductos = async (categoria = null) => {
    // GET /api/productos/?categoria=Tecnologia
    // Equivalente a: ProductoDAO.listarTodos()
    const params = categoria ? { categoria } : {};
    const response = await api.get('/productos/', {
        params
    });
    return response.data;
    // Retorna array de productos
};
export const obtenerProducto = async (id) => {
    // GET /api/productos/5    // Equivalente a: ProductoDAO.buscarPorId(id)
    const response = await api.get(`/productos/${id}`);
    return response.data;
};
export const crearProducto = async (producto) => {
    // POST /api/productos/ body: { codigo, nombre, precio, ... }
    // Equivalente a: ProductoDAO.insertar(producto)
    const response = await api.post('/productos/', producto);
    return response.data;
};
export const actualizarProducto = async (id, producto) => {
    // PUT /api/productos/5 body: { codigo, nombre, precio, ... }
    // Equivalente a: ProductoDAO.actualizar(producto)
    const response = await api.put(`/productos/${id}`, producto);
    return response.data;
};
export const eliminarProducto = async (id) => {
    // DELETE /api/productos/5    // Equivalente a: ProductoDAO.eliminar(id)
    await api.delete(`/productos/${id}`);
};

import './ProductoCard.css';

export default function ProductoCard({ producto, onEliminar }) {
    const formatoPrecio = new Intl.NumberFormat('es-CO', {
        style: 'currency',
        currency: 'COP',
        minimumFractionDigits: 0,
    });
    const stockClase = producto.stock < 10
        ? 'stock-bajo'
        : 'stock-normal';

    return (
        <div className="producto-card">
            <div className="producto-header">
                <span className="producto-codigo">{producto.codigo}</span>
                <span className={producto.estado ? 'activo' : 'inactivo'}>
                    {producto.estado ? 'Activo' : 'Inactivo'}
                </span>
            </div>

            <h3 className="producto-nombre">{producto.nombre}</h3>

            {producto.descripcion && (
                <p className="producto-descripcion">{producto.descripcion}</p>
            )}

            <div className="producto-detalles">
                <div className="producto-precio">
                    <span className="label">Precio:</span>
                    <span className="valor">
                        {formatoPrecio.format(producto.precio)}
                    </span>
                </div>

                <div className="producto-stock">
                    <span className="label">Stock:</span>
                    <span className={stockClase}>
                        {producto.stock} unidades
                    </span>
                </div>

                <div className="producto-categoria">
                    <span className="label">Categoría:</span>
                    <span className="valor">
                        {producto.categoria || 'Sin categoría'}
                    </span>
                </div>
            </div>

            <div className="producto-acciones">
                <a href={/productos/${producto.id}/editar}
                    className="btn-editar">
                    <i className="fas fa-edit"></i> Editar
                </a>
                <button onClick={() => onEliminar(producto.id)}
                    className="btn-eliminar">
                    <i className="fas fa-trash"></i> Eliminar
                </button>
            </div>
        </div>
    );
}

.producto-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.producto-card:hover {
    transform: translateY(-2px);
}
.producto-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.producto-codigo {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.producto-estado {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
}
.producto-estado.activo {
    background: #d4edda;
    color: #155724;
}
.producto-estado.inactivo {
    background: #f8d7da;
    color: #721c24;
}
.producto-nombre {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}
.producto-detalles {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0;
}
.producto-detalles .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.producto-detalles .valor {
    font-weight: 600;
}
.stock-bajo { color: #dc3545; }
.stock-normal { color: #28a745; }
.producto-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.btn-editar, .btn-eliminar {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
}
.btn-editar {
    background: #007bff;
    color: white;
    border: none;
}
.btn-eliminar {
    background: #dc3545;
    color: white;
    border: none;
}

import { useState, useEffect } from 'react';
import { listarProductos, eliminarProducto } from '../services/api';
import ProductoCard from './ProductoCard';
import Mensaje from './Mensaje';

export default function ProductoLista() {
    const [productos, setProductos] = useState([]);
    const [cargando, setCargando] = useState(true);
    const [error, setError] = useState(null);
    const [filtro, setFiltro] = useState('');
    const [mensaje, setMensaje] = useState(null);

    useEffect(() => {
        cargarProductos();
    }, []);

    async function cargarProductos() {
        try {
            setCargando(true);
            const data = await listarProductos();
            setProductos(data);
            setError(null);
        } catch (err) {
            setError('Error al cargar productos: ' + err.message);
        } finally {
            setCargando(false);
        }
    }

    async function handleEliminar(id) {
        if (!confirm('¿Eliminar este producto?')) return;
        try {
            await eliminarProducto(id);
            setMensaje({ tipo: 'exito', texto: 'Producto eliminado' });
            cargarProductos();
        } catch (err) {
            setMensaje({ tipo: 'error', texto: 'Error al eliminar' });
        }
    }

    const productosFiltrados = filtro
        ? productos.filter(p =>
            p.nombre.toLowerCase().includes(filtro.toLowerCase()) ||
            p.codigo.toLowerCase().includes(filtro.toLowerCase()))
        : productos;

    if (cargando) {
        return (
            <div className="estado-container">
                <div className="spinner"></div>
                <p>Cargando productos...</p>
            </div>
        );
    }

    if (error) {
        return (
            <div className="estado-container error">
                <i className="fas fa-exclamation-triangle"></i>
                <p>{error}</p>
                <button onClick={cargarProductos} className="btn-reintentar">
                    Reintentar
                </button>
            </div>
        );
    }

    return (
        <div className="producto-lista">
            {mensaje && (
                <Mensaje
                    tipo={mensaje.tipo}
                    texto={mensaje.texto}
                    onCerrar={() => setMensaje(null)}
                />
            )}

            <div className="lista-header">
                <h2>Productos ({productosFiltrados.length})</h2>
                <div className="lista-acciones">
                    <input
                        type="text"
                        placeholder="Buscar producto..."
                        value={filtro}
                        onChange={e => setFiltro(e.target.value)}
                        className="buscador"
                    />
                    <a href="/productos/nuevo" className="btn-crear">
                        + Nuevo Producto
                    </a>
                </div>
            </div>

            {productosFiltrados.length === 0 ? (
                <div className="vacio">
                    <i className="fas fa-box-open"></i>
                    <p>{filtro
                        ? 'Sin resultados para "' + filtro + '"'
                        : 'No hay productos'}
                    </p>
                </div>
            ) : (
                <div className="productos-grid">
                    {productosFiltrados.map(producto => (
                        <ProductoCard
                            key={producto.id}
                            producto={producto}
                            onEliminar={handleEliminar}
                        />
                    ))}
                </div>
            )}
        </div>
    );
}

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { crearProducto, actualizarProducto, obtenerProducto } from '../services/api';

export default function ProductoForm() {
    const navigate = useNavigate();
    const { id } = useParams();
    const esEdicion = Boolean(id);

    const [form, setForm] = useState({
        codigo: '', nombre: '', descripcion: '',
        precio: '', stock: '0', categoria: '',
    });
    const [enviando, setEnviando] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (id) {
            obtenerProducto(id)
                .then(data => setForm({
                    codigo: data.codigo,
                    nombre: data.nombre,
                    descripcion: data.descripcion || '',
                    precio: data.precio.toString(),
                    stock: data.stock.toString(),
                    categoria: data.categoria || '',
                }))
                .catch(err => setError('Error al cargar producto'));
        }
    }, [id]);

    const handleChange = (e) => {
        setForm({ ...form, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setEnviando(true);
        setError(null);
        try {
            const datos = {
                ...form,
                precio: parseFloat(form.precio),
                stock: parseInt(form.stock),
            };
            if (esEdicion) {
                await actualizarProducto(id, datos);
                alert('Producto actualizado exitosamente');
            } else {
                await crearProducto(datos);
                alert('Producto creado exitosamente');
            }
            navigate('/');
        } catch (err) {
            setError(err.response?.data?.detail || 'Error al guardar producto');
        } finally {
            setEnviando(false);
        }
    };

    return (
        <div className="producto-form-container">
            <h2>{esEdicion ? 'Editar Producto' : 'Nuevo Producto'}</h2>

            {error && (
                <div className="error-banner">
                    <i className="fas fa-exclamation-circle"></i> {error}
                </div>
            )}

            <form onSubmit={handleSubmit} className="producto-form">
                <div className="form-grid">
                    <div className="form-group">
                        <label>Código *</label>
                        <input name="codigo" value={form.codigo}
                            onChange={handleChange} required minLength={3} />
                    </div>

                    <div className="form-group">
                        <label>Nombre *</label>
                        <input name="nombre" value={form.nombre}
                            onChange={handleChange} required />
                    </div>

                    <div className="form-group full-width">
                        <label>Descripción</label>
                        <textarea name="descripcion" value={form.descripcion}
                            onChange={handleChange} rows={3} />
                    </div>

                    <div className="form-group">
                        <label>Precio *</label>
                        <input name="precio" type="number" step="0.01"
                            value={form.precio} onChange={handleChange} required />
                    </div>

                    <div className="form-group">
                        <label>Stock *</label>
                        <input name="stock" type="number"
                            value={form.stock} onChange={handleChange} required />
                    </div>

                    <div className="form-group">
                        <label>Categoría</label>
                        <select name="categoria" value={form.categoria}
                            onChange={handleChange}>
                            <option value="">Seleccionar...</option>
                            <option value="Tecnología">Tecnología</option>
                            <option value="Accesorios">Accesorios</option>
                            <option value="Audio">Audio</option>
                        </select>
                    </div>
                </div>

                <div className="form-acciones">
                    <button type="button" onClick={() => navigate('/')}
                        className="btn-cancelar">
                        Cancelar
                    </button>
                    <button type="submit" disabled={enviando}
                        className="btn-guardar">
                        {enviando ? 'Guardando...'
                            : (esEdicion ? 'Actualizar' : 'Crear Producto')}
                    </button>
                </div>
            </form>
        </div>
    );
}

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import ProductoLista from './components/ProductoLista';
import ProductoForm from './components/ProductoForm';

function Inicio() {
    return (
        <div className="inicio">
            <h1>Sistema de Inventario</h1>
            <p>API REST con FastAPI + Frontend React</p>
            <div className="inicio-stats">
                <div className="stat-card">
                    <i className="fas fa-boxes"></i>
                    <h3>Gestión de Productos</h3>
                    <p>CRUD completo desde React consumiendo FastAPI</p>
                </div>
                <div className="stat-card">
                    <i className="fas fa-bolt"></i>
                    <h3>Rendimiento</h3>
                    <p>FastAPI + React: respuesta en milisegundos</p>
                </div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <main className="contenido">
                <Routes>
                    <Route path="/" element={<Inicio />} />
                    <Route path="/productos" element={<ProductoLista />} />
                    <Route path="/productos/nuevo" element={<ProductoForm />} />
                    <Route path="/productos/:id/editar" element={<ProductoForm />} />
                </Routes>
            </main>
        </BrowserRouter>
    );
}

import { Link } from 'react-router-dom';
import './Navbar.css';

export default function Navbar() {
    return (
        <nav className="navbar">
            <div className="navbar-brand">
                <i className="fas fa-boxes"></i>
                <span>Inventario SENA</span>
            </div>
            <div className="navbar-links">
                <Link to="/">Inicio</Link>
                <Link to="/productos">Productos</Link>
                <Link to="/productos/nuevo" className="btn-nav-crear">
                    + Nuevo
                </Link>
            </div>
        </nav>
    );
}

/* ===== ESTILOS (Navbar.css) ===== */
.navbar {
    background: var(--primary);
    color: white;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}
.navbar-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.navbar-links a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background 0.2s;
    }.navbar-links a:hover {
    background: rgba(255,255,255,0.1);
    }.btn-nav-crear {
    background: rgba(255,255,255,0.2);
    font-weight: 600;
    }*/

# En el directorio fastapi-inventario
cd fastapi-inventario
.\venv\Scripts\activate
# Iniciar FastAPI (recarga automática)
uvicorn main:app --reload --port 8000
# Resultado:
# INFO: Uvicorn running on http://127.0.0.1:8000
# INFO: Swagger docs: http://localhost:8000/docs

# En el directorio frontend-inventario
cd frontend-inventario
npm run dev
# Resultado:
# VITE v5.4.0  ready in 250ms
# ➜  Local:   http://localhost:5173/
# Abrir http://localhost:5173 en el navegador
# La app React consume http://localhost:8000/api/productos/

┌─────────────────────────────────────────────────────────────┐
│  En la consola del navegador (F12 → Console):              │
│                                                             │
│  ✓ Productos cargados desde FastAPI: 3 productos            │
│  ✓ GET /api/productos/ → 200 OK (320ms)                    │
│  ✓ CORS configurado correctamente                           │
│                                                             │
│  Network tab:                                               │
│  ┌──────────┬──────────┬────────┬──────────┐               │
│  │ Method   │ Endpoint │ Status │ Time     │               │
│  ├──────────┼──────────┼────────┼──────────┤               │
│  │ GET      │ /api/pro │ 200    │ 320ms    │               │
│  │          │ ductos/  │        │          │               │
│  │ GET      │ /api/pro │ 200    │ 15ms     │               │
│  │          │ ductos/1 │        │          │               │
│  └──────────┴──────────┴────────┴──────────┘               │
└─────────────────────────────────────────────────────────────┘

# ===========================================================
# 🐳 DOCKER (un solo comando, todo encapsulado)
# ===========================================================
docker compose -f docker-compose.fullstack.yml up -d
# Prueba:  http://localhost

# ===========================================================
# 🪟 NATIVO WINDOWS (tres terminales, máximo control)
# ===========================================================
# Terminal 1: PostgreSQL (servicio Windows) + FastAPI
# Terminal 2: React
# ⚡ O usa el script automático:
.\start-fullstack.ps1
# Prueba:  http://localhost:5173