Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sergio-salcedo-dev/excel-product-manager/llms.txt

Use this file to discover all available pages before exploring further.

The product catalog is the core of Preoc Product Manager. It covers the full lifecycle of a product entry — from manual creation through the “Nuevo Producto” modal, through editing and bulk import, all the way to permanent deletion with a confirmation guard. Every change is automatically persisted to localStorage so your catalog survives browser refreshes without any backend.

​
The Product Data Model

Every item in the catalog conforms to the Product interface defined in the domain layer: 
export type ProductId = string;

export interface Product {
  id: ProductId;
  code: string;
  description: string;
  unit: string;
  price: number;
  category: string;
}
​
id
string
required
Unique identifier for the product. Auto-generated as prod-{timestamp} for entries created through the manual form, or preoc-{timestamp}-{index} for products imported via the AI search tools (CYPE Precios or Mercado AI) using the bulk addAllPreocProducts flow.
​
code
string
required
Short reference code for the product (e.g., MT-001, MO-002, HAC010). Displayed in monospace font throughout the table and card views to visually distinguish it from the description.
​
description
string
required
Full technical description of the product. This field is searched when you type in the search bar, alongside code.
​
unit
string
required
Unit of measure for pricing (e.g., ud, m3, kg, h, sac, m2, rol). Displayed next to the price as {price} € / {unit}.
​
price
number
required
Unit price in euros. Stored as a float (e.g., 9.50, 22.00). Rendered with two decimal places throughout the UI using .toFixed(2).
​
category
string
required
Product category string. Drives the sidebar category filter — each unique value automatically appears as a filter option. Also controls the color badge rendered next to the product in the table and card views.

​
Default Catalog

On first launch, when no products key exists in localStorage, the application pre-loads a built-in catalog of 20 Spanish construction products spanning six categories: Materiales, Mano de Obra, Maquinaria, Instalaciones, Pinturas, and Acabados. The table below shows five representative entries from the default catalog:
CodeDescriptionUnitPrice (€)Category
MT-001Cemento Portland Tipo I - Saco 50kgsac9.50Materiales
MT-002Arena Lavada de Rio - m3m322.00Materiales
MO-001Oficial de Primera - Horah24.50Mano de Obra
MQ-001Hormigonera Eléctrica 150L - Alquiler díadía12.00Maquinaria
IN-001Cable Cobre 2.5mm Libre Halógenos - 100mrol65.00Instalaciones
The remaining 15 default products cover items such as ladrillo hueco (MT-003), varilla corrugada (MT-004), panel yeso laminado (MT-005), malla electrosoldada (MT-006), yeso negro para guarnecidos (MT-007), peón especialista (MO-002), alicatador oficial (MO-003), andamio tubular (MQ-002), martillo demoledor (MQ-003), tubo PVC sanitarios (IN-002), cuadro eléctrico (IN-003), grifería monomando (IN-004), pintura plástica (AC-001), imprimación fijadora (AC-002), and adhesivo porcelánico (AC-003).
Use the Restablecer Catálogo button in the sidebar to wipe your current catalog and reload all 20 default products at any time. See Data Persistence below for details.

​
Adding a Product

Click the Nuevo Producto button (desktop sidebar or the + icon in the mobile header) to open the product form modal. All fields are required.
1

Open the New Product modal

Click Nuevo Producto in the left sidebar on desktop, or the + icon in the top-right corner of the header on mobile. The modal slides up from the bottom on small screens and centers on desktop.
2

Fill in the required fields

Complete the form fields:
  • Descripción del Producto — full technical description (textarea)
  • Código Referencia — short reference code, rendered in monospace
  • Categoría — category string; determines sidebar filter grouping
  • Precio Unitario (€) — numeric price with two decimal precision
  • Unidad Medida — unit of measure, defaults to ud
3

Save the product

Click Guardar Datos. The new product is prepended to the catalog and the view resets to page 1 so you can immediately see the new entry. A green success alert confirms the creation.

​
Editing and Deleting

Every product row exposes Edit and Delete actions, available in both the desktop table view and the mobile card view. Editing opens the same modal form pre-populated with the product’s current values. On desktop, click the Editar text link in the rightmost column. On mobile, tap the pencil icon button on the product card. Submit the form to save changes — the product is updated in place without changing its position in the list. Deleting first shows a confirmation dialog before any data is removed:
“¿Está seguro de que desea eliminar este producto? Esta acción no se puede deshacer.”
Click Confirmar to proceed with deletion, or Cancelar to dismiss. On desktop, click the red Borrar text link in the actions column. On mobile, tap the trash icon button on the product card.

​
Filtering and Searching

The catalog supports five independent filter dimensions that can be combined freely. All filters update the product list in real time without a page reload. Text search — The search bar in the toolbar searches both the description and code fields simultaneously. Entering multiple space-separated terms applies all of them as a conjunction (AND logic): every term must appear somewhere in the combined "{description} {code}" string for the product to match. Category filter — The left sidebar lists all unique category values present in the current catalog, plus a “Todas” option. Clicking a category restricts the list to products in that single category. The active category is highlighted with a colored left border. Price range filter — Two numeric inputs in the sidebar’s “Filtros Avanzados” panel accept minimum and maximum prices in euros. Either boundary can be set independently — setting only a minimum hides everything below it; setting only a maximum hides everything above. Sort options — A dropdown in the sidebar controls result ordering:
OptionFieldDirection
Sin orden (Relevancia)——
Precio: Menor a MayorpriceAscending
Precio: Mayor a MenorpriceDescending
Nombre: A-ZdescriptionAscending
Nombre: Z-AdescriptionDescending
Active filter count badge — A small numbered badge appears on the filter panel button (mobile) and in the sidebar’s “Filtros Avanzados” header whenever one or more filters are active. The count increments for each of: non-empty search query, non-”Todas” category, minimum price, maximum price, and non-default sort. Reset Filters — A Limpiar Filtros button appears whenever activeFiltersCount > 0. Clicking it clears all five filter dimensions and returns to page 1.

​
Pagination

The catalog renders 8 products per page (itemsPerPage = 8). The pagination bar at the bottom of the product list shows:
  • Desktop — numbered page buttons (one per page) plus previous / next chevron buttons. The current page button is highlighted in the primary color.
  • Mobile — a compact {currentPage} / {totalPages} counter flanked by previous and next chevron buttons.
The pagination bar also displays a record count summary: “Mostrando a de ”, reflecting the filtered result set rather than the full catalog. Changing any filter automatically resets the current page back to 1 to ensure results are always visible from the beginning.

​
Data Persistence

All product changes — creates, edits, deletes, imports, and resets — are automatically saved to localStorage under the key products as a JSON-serialized array. No backend or API call is required. On startup, the application reads from localStorage. If the key is missing, empty, or unparseable, it falls back to the 20 default products and writes them to localStorage immediately.
Data persists across browser sessions and page refreshes as long as the browser storage is intact. It is scoped to the origin (domain + port) of the application — different devices or browsers maintain separate catalogs. Clearing browser storage or site data in your browser settings will reset the catalog to the 20 defaults on next load.
The Restablecer Catálogo button (red, at the bottom of the sidebar) resets the entire catalog back to the 20 built-in default products. A confirmation dialog appears before any data is overwritten: “¿Desea restablecer todos los datos al catálogo por defecto de 20 productos? Se perderán todos los cambios actuales.” This is useful when you want a clean slate after experimenting with imports or manual entries.

Build docs developers (and LLMs) love

Get started for freeTalk to us