Inventory Table - StockPro

Overview

The inventory table displays all products with inline actions, status badges, and filtering capabilities.

Search Bar

The search bar provides filtering controls above the inventory table.

HTML Structure

<div class="search-bar">
  <input type="search" placeholder="🔍 Buscar por nombre, SKU o categoría...">
  <select>
    <option>Todas las categorías</option>
    <option>Electrónica</option>
    <option>Accesorios</option>
    <option>Periféricos</option>
    <option>Audio</option>
  </select>
  <select>
    <option>Todo el stock</option>
    <option>En stock</option>
    <option>Stock bajo</option>
    <option>Sin stock</option>
  </select>
  <a href="panel_nuevo-producto.html" class="btn btn-p">+ Agregar Producto</a>
</div>

Source: panel_inventario.html:56-72

CSS Classes

`.search-bar`

Display: Flex
Align items: Center
Gap: 8px
Margin bottom: 18px
Flex wrap: Wrap

Source: base.css:427-433

Search Input

.search-bar input[type=search] {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--gb);
  border-radius: var(--r);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}

Source: base.css:435-446

Focus State

.search-bar input:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(208, 2, 27, .09);
}

Source: base.css:448-451

Table Structure

HTML Structure

<div class="card">
  <div class="card-title">Productos registrados <small>1,284 en total</small></div>
  <div class="t-wrap">
    <table>
      <thead>
        <tr>
          <th>SKU</th>
          <th>Producto</th>
          <th>Categoría</th>
          <th>Precio</th>
          <th>Stock</th>
          <th>Mín.</th>
          <th>Estado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody>
        <!-- Product rows... -->
      </tbody>
    </table>
  </div>
</div>

Source: panel_inventario.html:74-153

CSS Classes

`.t-wrap`

Scrollable table wrapper

overflow-x: auto;

Source: base.css:357-359

`table`

Width: 100%
Border collapse: Collapse
Font size: 13px

Source: base.css:361-365

`thead th`

Table headers

Background: Light gray (var(--gf))
Color: Medium gray (var(--gm))
Font size: 10.5px
Transform: Uppercase
Letter spacing: 0.7px
Padding: 9px 13px
Text align: Left
Font weight: 600
Border bottom: 2px solid gray

Source: base.css:367-377

`tbody tr`

Table rows

Border bottom: 1px solid gray
Transition: Background 0.12s

Source: base.css:379-382

Row Hover

tbody tr:hover {
  background: var(--rojo-s);
}

Source: base.css:384-386

`td`

Table cells

Padding: 11px 13px
Vertical align: Middle

Source: base.css:392-395

Product Row Structure

In Stock Product

<tr>
  <td><code>AUD-001</code></td>
  <td>
    <strong>Audífonos Bluetooth Pro</strong><br>
    <small style="color:var(--gm)">SoundMax</small>
  </td>
  <td>Audio</td>
  <td><strong>$89.99</strong></td>
  <td>42 uds.</td>
  <td>10 uds.</td>
  <td><span class="badge b-green">En Stock</span></td>
  <td style="display:flex;gap:5px">
    <button class="btn btn-s" style="padding:4px 9px;font-size:12px">✏️ Editar</button>
    <button class="btn btn-d" style="padding:4px 9px;font-size:12px">🗑️</button>
  </td>
</tr>

Source: panel_inventario.html:85-95

Low Stock Product

<tr>
  <td><code>CAB-014</code></td>
  <td>
    <strong>Cable USB-C 2m Trenzado</strong><br>
    <small style="color:var(--gm)">TechLine</small>
  </td>
  <td>Accesorios</td>
  <td><strong>$12.50</strong></td>
  <td style="color:var(--rojo);font-weight:700">4 uds.</td>
  <td>15 uds.</td>
  <td><span class="badge b-orange">Stock Bajo</span></td>
  <td style="display:flex;gap:5px">
    <button class="btn btn-s" style="padding:4px 9px;font-size:12px">✏️ Editar</button>
    <button class="btn btn-d" style="padding:4px 9px;font-size:12px">🗑️</button>
  </td>
</tr>

Source: panel_inventario.html:96-106

Out of Stock Product

<tr>
  <td><code>MON-022</code></td>
  <td>
    <strong>Monitor 27" 144Hz</strong><br>
    <small style="color:var(--gm)">ViewMax</small>
  </td>
  <td>Electrónica</td>
  <td><strong>$399.00</strong></td>
  <td style="color:var(--rojo);font-weight:700">0 uds.</td>
  <td>3 uds.</td>
  <td><span class="badge b-red">Sin Stock</span></td>
  <td style="display:flex;gap:5px">
    <button class="btn btn-s" style="padding:4px 9px;font-size:12px">✏️ Editar</button>
    <button class="btn btn-d" style="padding:4px 9px;font-size:12px">🗑️</button>
  </td>
</tr>

Source: panel_inventario.html:118-128

Badge System

Status badges indicate product availability.

CSS Classes

`.badge`

Base badge styles

Display: Inline-block
Padding: 2px 9px
Border radius: 20px
Font size: 11px
Font weight: 600

Source: base.css:398-404

Badge Variants

.b-green - In Stock

background: #E6F4EC;
color: #1E8A3E;

Source: base.css:406-409 .b-orange - Low Stock

background: #FFF3E0;
color: #E65100;

Source: base.css:421-424 .b-red - Out of Stock

background: var(--rojo-s);
color: var(--rojo);

Source: base.css:411-414 .b-gray - Inactive/Disabled

background: #EFEFEF;
color: var(--gm);

Source: base.css:416-419

Badge Usage

<span class="badge b-green">En Stock</span>
<span class="badge b-orange">Stock Bajo</span>
<span class="badge b-red">Sin Stock</span>

Source: panel_inventario.html:90,101,123

SKU Display

SKU codes are displayed in a monospace format.

<code>AUD-001</code>

CSS

code {
  background: var(--gf);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}

Source: base.css:536-541

Action Buttons

Edit and Delete Buttons

<td style="display:flex;gap:5px">
  <button class="btn btn-s" style="padding:4px 9px;font-size:12px">✏️ Editar</button>
  <button class="btn btn-d" style="padding:4px 9px;font-size:12px">🗑️</button>
</td>

Source: panel_inventario.html:91-94

Button Classes

`.btn-s` (Secondary)

Background: White
Color: Black
Border: 1px solid light gray
Hover: Light gray background

Source: base.css:211-219

`.btn-d` (Danger)

Background: Light red (var(--rojo-s))
Color: Red (var(--rojo))
Border: 1px solid #f5c5c5
Hover: Gray background

Source: base.css:221-229

Pagination

Pagination controls are displayed below the table.

HTML Structure

<div style="display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:12.5px;color:var(--gm)">
  <span>Mostrando 1–6 de 1,284 productos</span>
  <div style="display:flex;gap:5px">
    <button class="btn btn-s" style="padding:5px 11px">← Anterior</button>
    <button class="btn btn-p" style="padding:5px 11px">1</button>
    <button class="btn btn-s" style="padding:5px 11px">2</button>
    <button class="btn btn-s" style="padding:5px 11px">3</button>
    <button class="btn btn-s" style="padding:5px 11px">Siguiente →</button>
  </div>
</div>

Source: panel_inventario.html:154-163

Active Page Button

<button class="btn btn-p" style="padding:5px 11px">1</button>

.btn-p (Primary) - Active page

Background: Red (var(--rojo))
Color: White
Hover: Darker red

Source: base.css:202-209

Stock Level Styling

Critical Stock (Red)

<td style="color:var(--rojo);font-weight:700">4 uds.</td>
<td style="color:var(--rojo);font-weight:700">0 uds.</td>

Low or zero stock quantities are displayed in bold red text. Source: panel_inventario.html:100,122

Responsive Behavior

On screens below 860px:

Table becomes horizontally scrollable via .t-wrap
Search bar items wrap to multiple rows

Source: base.css:357-359,544-557

Firebase Integration

Components

​Overview

​Search Bar

​HTML Structure

​CSS Classes

​.search-bar

​Search Input

​Focus State

​Table Structure

​HTML Structure

​CSS Classes

​.t-wrap

​table

​thead th

​tbody tr

​Row Hover

​td

​Product Row Structure

​In Stock Product

​Low Stock Product

​Out of Stock Product

​Badge System

​CSS Classes

​.badge

​Badge Variants

​Badge Usage

​SKU Display

​CSS

​Action Buttons

​Edit and Delete Buttons

​Button Classes

​.btn-s (Secondary)

​.btn-d (Danger)

​Pagination

​HTML Structure

​Active Page Button

​Stock Level Styling

​Critical Stock (Red)

​Responsive Behavior

Build docs developers (and LLMs) love

Overview

Search Bar

HTML Structure

CSS Classes

`.search-bar`

Search Input

Focus State

Table Structure

HTML Structure

CSS Classes

`.t-wrap`

`table`

`thead th`

`tbody tr`

Row Hover

`td`

Product Row Structure

In Stock Product

Low Stock Product

Out of Stock Product

Badge System

CSS Classes

`.badge`

Badge Variants

Badge Usage

SKU Display

CSS

Action Buttons

Edit and Delete Buttons

Button Classes

`.btn-s` (Secondary)

`.btn-d` (Danger)

Pagination

HTML Structure

Active Page Button

Stock Level Styling

Critical Stock (Red)

Responsive Behavior