import React, { useState, useEffect, useMemo } from 'react'; import { Search, Package, Filter, BarChart3, Rocket, AlertCircle } from 'lucide-react'; // --- Interfaces para el Tipado --- interface Articulo { ArticuloID: string[]; Nombre: string; ArticuloEmpresa: string; Descripcion: string; Clasificacion1ArticulosNombre: string; Clasificacion2ArticulosNombre: string; Clasificacion3ArticulosNombre: string; } interface ApiResponse { ObtenerArticulosResponse: { ObtenerArticulosResult: { Articulos: { Articulo: Articulo[]; }; }; }; } const GalacticDashboard: React.FC = () => { const [articulos, setArticulos] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [filterRubro, setFilterRubro] = useState('Todos'); const API_URL = 'https://sfv-uat.hubeet.com/files/5eb2adb9-90ba-4078-a2bd-1f276631c3c5?viewOnBrowser=true'; useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch(API_URL); if (!response.ok) throw new Error('Error al conectar con la base de datos estelar'); const data: ApiResponse = await response.json(); setArticulos(data.ObtenerArticulosResponse.ObtenerArticulosResult.Articulos.Articulo); } catch (err) { setError(err instanceof Error ? err.message : 'Error desconocido'); } finally { setLoading(false); } }; fetchData(); }, []); // --- Lógica de Filtros para el Gerente --- const filteredArticulos = useMemo(() => { return articulos.filter((art) => { const matchesSearch = art.Nombre.toLowerCase().includes(searchTerm.toLowerCase()) || art.ArticuloEmpresa.toLowerCase().includes(searchTerm.toLowerCase()); const matchesRubro = filterRubro === 'Todos' || art.Clasificacion2ArticulosNombre === filterRubro; return matchesSearch && matchesRubro; }); }, [articulos, searchTerm, filterRubro]); const rubros = useMemo(() => { const set = new Set(articulos.map(a => a.Clasificacion2ArticulosNombre)); return ['Todos', ...Array.from(set)]; }, [articulos]); if (loading) return (

Cargando sistemas de inventario...

); if (error) return (

Error: {error}

); return (

{/* Fondo Decorativo Galáctico */}

{/* Header Estilo Dashboard */}

Control de Artículos Galácticos

Vista Gerencial de Inventario v1.0

Total Items

{filteredArticulos.length}

Rubros Activos

{rubros.length - 1}

{/* Barra de Filtros */}

setSearchTerm(e.target.value)} />

{/* Grilla de Artículos */}

{filteredArticulos.map((art) => (

{/* Badge de Categoría */}

{art.Clasificacion3ArticulosNombre} ID: {art.ArticuloID[0]}

{art.Nombre}

Proveedor {art.Clasificacion1ArticulosNombre}

SKU Empresa

{art.ArticuloEmpresa}

Rubro

{art.Clasificacion2ArticulosNombre}

{/* Efecto de luz al hover */}

))}

{filteredArticulos.length === 0 && (

No se encontraron suministros en este sector de la galaxia.

)}

); }; export default GalacticDashboard;