filtros y busquedas aplicadas

[tomaskoblukUTN]

No description provided.

[Copilot]

Pull request overview

This PR adds comprehensive filtering and search capabilities to the inventory management page. The implementation includes a collapsible filter panel with price range, stock range, and category filters, along with a search bar for filtering products by name.

Key Changes:

• Added search functionality with real-time filtering by product name
• Implemented advanced filters for price range, stock quantity, and category selection
• Introduced a toggleable filter panel UI with responsive design and improved styling

Comments suppressed due to low confidence (1)

apigrupo11/frontend/src/app/inventario/page.tsx:128

• The filter logic doesn't handle the case where minPrice > maxPrice or minStock > maxStock. Users could set minPrice to 1000 and maxPrice to 100, which would result in no products being displayed without clear feedback about the invalid range.

Consider adding validation:

const filteredProductos = productos.filter((producto) => {
  const matchesSearch = producto.nombre
    .toLowerCase()
    .includes(searchQuery.toLowerCase());
  
  // Swap if min > max
  const actualMinPrice = Math.min(appliedFilters.minPrice, appliedFilters.maxPrice);
  const actualMaxPrice = Math.max(appliedFilters.minPrice, appliedFilters.maxPrice);
  const matchesPrice =
    producto.precio >= actualMinPrice &&
    producto.precio <= actualMaxPrice;
  
  // Similar for stock...
  const matchesStock = /* ... */;
  const matchesCategory = /* ... */;

  return matchesSearch && matchesPrice && matchesStock && matchesCategory;
});

Or prevent invalid ranges in the handleApplyFilters function.

  const handleUpdateProduct = (updatedProduct: IProducto) => {
    setProductos((prev) => prev.map((p) => (p.id === updatedProduct.id ? updatedProduct : p)));
    setShowAddForm(false);
    setEditingProduct(null);
  };

  const handleEditClick = (product: IProducto) => {
    setEditingProduct(product);
    setShowAddForm(true);
  };

  const handleCloseForm = () => {
    setShowAddForm(false);
    setEditingProduct(null);
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The filter inputs (price range, stock range) and select dropdown are missing associated id attributes and proper htmlFor attributes on their labels. This impacts accessibility as screen readers won't properly associate labels with their inputs.

For example:

<label htmlFor="minPrice" style={{...}}>
  <MdAttachMoney size={18} />
  Rango de Precio
</label>
<input
  id="minPrice"
  type="number"
  ...
/>

Apply similar changes to all filter inputs and the category select element.

[Copilot]

The "Filtros" button should include an aria-expanded attribute to indicate whether the filter panel is currently visible or hidden. This helps screen reader users understand the toggle state.

Update the button:

<button
  onClick={() => setShowFilters(!showFilters)}
  aria-expanded={showFilters}
  aria-controls="filters-panel"
  style={{...}}
>
  <MdFilterList size={18} />
  Filtros
</button>

Also add id="filters-panel" to the filters container div (line 268) for proper ARIA association.

[Copilot]

The input allows negative values for price through manual typing. A user can type -100 in the minPrice field even though step="1" is set. This could lead to unexpected filter behavior or UI inconsistencies.

Add a min="0" attribute to prevent negative values:

<input
  type="number"
  placeholder="$0"
  step="1"
  min="0"
  value={filters.minPrice || ''}
  ...
/>

Apply the same fix to all number inputs (maxPrice, minStock, maxStock) on lines 385, 460, and 498.

[Copilot]

[nitpick] The handleApplyFilters function could provide better UX by collapsing the filter panel after filters are applied, allowing users to see the filtered results immediately without manually closing the panel.

Consider adding:

const handleApplyFilters = () => {
  setAppliedFilters(filters);
  setShowFilters(false); // Auto-collapse after applying
};

[Copilot]

The search input is missing a label element or aria-label attribute. While the placeholder provides a visual hint, screen reader users need a proper label to understand the purpose of this input.

Add an accessible label:

<label htmlFor="searchInput" style={{ /* visually hidden if needed */ }}>
  Buscar producto por nombre
</label>
<input
  id="searchInput"
  type="text"
  ...
/>

Alternatively, use aria-label="Buscar producto por nombre" on the input element.

[Copilot]

The inline styles for input elements are heavily duplicated across multiple inputs (min/max price, min/max stock). The onFocus and onBlur handlers with style manipulation are repeated identically 6 times.

Consider extracting this to a reusable styled component or a shared style object and event handlers:

const inputStyles = {
  flex: 1,
  minWidth: '80px',
  padding: 'clamp(8px, 2%, 12px) clamp(10px, 2%, 14px)',
  // ... rest of styles
};

const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
  e.target.style.borderColor = theme.colors.primary;
  e.target.style.boxShadow = `0 0 0 3px ${theme.colors.primary}20`;
};

const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
  e.target.style.borderColor = theme.colors.border;
  e.target.style.boxShadow = 'none';
};

[Copilot]

Using (e.target as any) bypasses TypeScript's type safety. The event target is already typed as HTMLInputElement from the onChange handler, so you can safely access its style properties without type assertion.

Consider using a more type-safe approach:

onFocus={(e) => {
  e.target.style.borderColor = theme.colors.primary;
  e.target.style.boxShadow = `0 0 0 3px ${theme.colors.primary}20`;
}}

This pattern is repeated throughout the filter inputs and should be updated consistently.

[Copilot]

The "Aplicar Filtros" and "Limpiar" buttons use onMouseEnter and onMouseLeave for visual feedback, but these events don't work for keyboard users. Consider using :hover and :focus pseudo-classes via CSS-in-JS or adding onFocus handlers as well to ensure keyboard users get the same visual feedback.

Alternatively, consider using a CSS-in-JS solution or adding focus handlers:

onFocus={(e) => {
  e.target.style.transform = 'translateY(-2px)';
  e.target.style.boxShadow = `0 6px 16px ${theme.colors.primary}60`;
}}

[Copilot]

When filters are applied and no products match the criteria, the UI shows an empty table body with no feedback to the user. This creates a confusing experience where users might think the page is broken or loading.

Add a check to display a "No products found" message:

<tbody>
  {filteredProductos.length === 0 ? (
    <tr>
      <td colSpan={5} style={{ padding: '48px', textAlign: 'center', color: theme.colors.textSecondary }}>
        No se encontraron productos que coincidan con los filtros aplicados
      </td>
    </tr>
  ) : (
    filteredProductos.map((producto) => (
      // ... existing product rows
    ))
  )}
</tbody>

[Copilot]

Unused import deleteProduct.

Suggested change

deleteProduct,