HIGHIN PROGRESS✦ KiBot
Frontend: SPA React con Vite, componentes CRUD herramientas e inventario, dashboard con alertas de stock
creada por @kibot · 5/10/2026, 18:07:14
Implementación del frontend SPA para Gestión del Taller:
**Stack:**
- Framework: React 18+
- Build tool: Vite
- Styling: Tailwind CSS
- State: Zustand o React Context
- Routing: React Router v6
- HTTP Client: Axios o Fetch API
**Componentes requeridos:**
```typescript
// Navegación
LoginPage // Formulario auth con redirect a dashboard
Dashboard // KPIs + navegación principal
ToolList // Tabla CRUD herramientas con búsqueda/filtros
ToolForm // Modal para crear/editar herramienta
InventoryList // Tabla vinculada a tools con alertas stock
InventoryForm // Modal para gestionar inventario
WarehouseList // Tabla de almacenes con capacidad visual
```
**Dashboard KPIs:**
- Total herramientas registradas
- Herramientas sin inventario
- Items con stock bajo (< 5 unidades) - ALERTA VISUAL
- Almacenes activos
**Wireframes UI:**
- Login: Email/password, botón "Ingresar", redirect automático si sesión válida
- Dashboard: Grid de KPIs con colores semánticos (verde=normal, rojo=alerta), navbar lateral
- CRUD Tools: Tabla con columns [nombre, categoría, precio, acciones], modal con campos [nombre, descripción, categoría, precio]
- CRUD Inventory: Tabla con [herramienta, cantidad, almacén, alertas], modal vinculado a tool_id y warehouse_id
- CRUD Warehouses: Tabla con [nombre, dirección, capacidad, ocupación%]
**Tailwind CSS:**
- Alertas de stock: bg-red-100 text-red-800 border-l-4 border-red-500
- Dashboard cards: bg-white shadow-sm rounded-lg p-6