Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ProyectoFerretek/FerreMarket/llms.txt

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

The Products module (/productos) is the primary catalogue management interface in FerreMarket. It lets you browse every product in the Supabase productos table, search and filter by name, SKU, category, or status, switch between grid and table layouts, and perform full CRUD operations — add, edit, and delete — through modal dialogs that persist changes back to the database in real time.

​
Product Fields

Every product is modelled by the Producto TypeScript interface defined in src/types/index.ts:
FieldTypeDescription
idstringUnique numeric identifier assigned by Supabase
skustringStock-keeping unit code; also used as the Cloudflare CDN image filename (<sku>.webp)
nombrestringDisplay name shown in cards, tables, and search results
descripcionstringShort product description; searchable via the search bar
precionumberUnit price in Chilean pesos (CLP)
categoriastringForeign key matching one of the six category IDs (1–6)
stocknumberCurrent on-hand quantity in units
imagenstringAbsolute URL to the product image on the Cloudflare CDN
destacadobooleantrue marks the product as featured; used by the Dashboard ProductosDestacados panel

​
Viewing Products

Products are loaded on mount via obtenerProductos() and stored in local React state. Two view modes are available via a toggle in the page header (desktop only):

Grid View

Default view on all screen sizes. Products appear as responsive cards (1 → 2 → 3 → 4 columns). Each card shows the product image, name, category badge, description, price, stock count, and stock status indicator. Click any image to open a full-screen preview overlay.

Table View

Available on screens ≥ 1024 px. Products appear in a scrollable table with sortable columns for Categoría, Precio, and Stock. Click any column header to toggle ascending/descending sort via the ArrowUpDown icon.
Search and filters are always visible on desktop; on mobile they collapse behind a Filtros toggle button:
ControlBehaviour
Search boxMatches against nombre and descripcion (case-insensitive)
Category dropdownFilters to a single category; options populated from the categorias constant
Status dropdownFilters by the destacado boolean — Activo matches destacado === true; Inactivo matches destacado === false
Items per page10 / 25 / 50 / 100; resets to page 1 on change
Limpiar buttonResets all three filters and returns to page 1
Pagination controls appear below the product list whenever the filtered result count exceeds the page size. The footer shows the current range and total count, e.g. “Mostrando 1 a 10 de 34 productos”.

​
Adding and Editing

1

Open the modal

Click the + Nuevo Producto button in the top-right header to open ProductoModal in “create” mode. To edit an existing product, click the Editar (pencil) button on a card or table row; the modal opens pre-filled with that product’s current values.
2

Fill in the form

Complete all required fields: SKU, name, description, price, category, stock quantity. Toggle Destacado to include the product in the Dashboard featured panel.
3

Upload image (new products only)

Select a product image. On save, FerreMarket encodes the image as Base64, converts it to a .webp File object, and uploads it to Cloudflare Workers via a PUT request before inserting the product row.
4

Save

  • New product → calls agregarProducto(producto) which inserts into Supabase and uploads the CDN image.
  • Existing product → calls actualizarProducto(id, producto) which issues a Supabase UPDATE (image URL is not changed on edit). After either operation, the modal closes and cargarProductos() re-fetches the full product list.

​
Deleting Products

Product deletion is permanent. There is no soft-delete or recycle bin. Once confirmed, the record is removed from the Supabase productos table and cannot be recovered from within FerreMarket.
1

Click the delete icon

Click the red Trash icon on a product card or table row. This stores the product in productoSeleccionado state and opens the ConfirmDialog.
2

Confirm in the dialog

The dialog reads: “¿Estás seguro de que deseas eliminar el producto ‘[nombre]’?”. Click Confirmar to proceed or Cancelar to abort.
3

Record removed

eliminarProducto(id) executes DELETE FROM productos WHERE id = ? via the Supabase client. The product list is refreshed automatically.

​
Stock Status Indicators

Each product displays a coloured badge derived from its current stock value:
Stock LevelIconBadge ColourLabel
stock > 20CheckCircleGreenDisponible
5 ≤ stock ≤ 20AlertTriangleYellowStock bajo
1 ≤ stock < 5AlertCircleRedMuy bajo
stock === 0CircleGreySin stock
The top-right corner of each product card always shows a green CircleDot icon (rendered via CircleDot from Lucide React). The Producto interface does not include a separate estado field — the getEstadoIcono helper defaults to the 'activo' (green) icon for all products.

​
URL Category Filter

The Products page reads a ?categoria=<id> query parameter on mount. This is used by the Dashboard’s CategoriasProductos panel, which appends the category ID to the navigation link so users land on the Products page with that category pre-selected. 
// Applied in a useEffect that watches searchParams:
const categoriaParam = searchParams.get("categoria");
if (categoriaParam) {
  setFiltroCategoria(categoriaParam);
  // The param is removed from the URL after being applied
  newSearchParams.delete("categoria");
  setSearchParams(newSearchParams, { replace: true });
}
After the filter is applied the query parameter is removed from the URL (replace: true) so that sharing or bookmarking the URL does not lock users into a category filter.

Build docs developers (and LLMs) love

Get started for freeTalk to us