F-075 — Architect: Inline edit SKU/EAN/STOCK in inventory module; remove Actions column

Current state

inventory/page.tsx has:

SKU displayed as plain text (no edit capability)
EAN displayed as plain text (no edit capability)
Stock inline edit via ✏️ button in the Stock column
Empty "Acción" column header (th with no corresponding td in tbody — vestigial)

The backend has PATCH /products/:id/variants/:variantId which accepts sku and ean fields. This endpoint is accessible via the admin proxy.

Goal

Make SKU, EAN, and Stock editable inline by clicking on the cell
Remove the vestigial "Acción" column (th with no corresponding td)
Add updateVariant to productsApi in the admin API client

Scope IN

project/apps/admin/src/lib/api-client.ts:
- Add updateVariant(productId, variantId, data) to productsApi
project/apps/admin/src/app/(dashboard)/inventory/page.tsx:
- Extend VariantRow interface with editingSku, editSkuValue, editingEan, editEanValue states
- Add handleSaveSku and handleSaveEan functions calling productsApi.updateVariant
- Make SKU cell: click on text → shows input → save on Enter/blur
- Make EAN cell: click on text → shows input → save on Enter/blur
- Stock: click on value (not just ✏️) to enter edit mode
- Remove the "Acción" column header (th) and its row in the table

Scope OUT

No backend changes (endpoint already exists)
No changes to the product editor (PricingSection, InventorySection)

Design

SKU cell (click-to-edit):

{row.editingSku ? (
  <input
    autoFocus
    value={row.editSkuValue}
    onChange={e => setRows(prev => prev.map(r =>
      r.variant.id === row.variant.id ? { ...r, editSkuValue: e.target.value } : r))}
    onBlur={() => handleSaveSku(row.variant.id, row.productId, row.editSkuValue)}
    onKeyDown={e => { if (e.key === 'Enter') handleSaveSku(...); if (e.key === 'Escape') ...; }}
    className="w-full px-2 py-1 border border-[#2D6A4F] rounded text-xs focus:ring-1 focus:ring-[#2D6A4F]"
  />
) : (
  <button onClick={() => setRows(prev => prev.map(r =>
      r.variant.id === row.variant.id ? { ...r, editingSku: true, editSkuValue: row.variant.sku } : r))}
    className="font-mono text-xs text-gray-600 hover:text-[#2D6A4F] cursor-text text-left w-full truncate"
    title="Clic para editar"
  >
    {row.variant.sku}
  </button>
)}

EAN cell: same pattern for EAN.

Stock cell: same pattern, but click on the value (not just ✏️).

Risk

Low risk: purely frontend changes, no backend or DB changes
SKU uniqueness validation: backend returns error if duplicate SKU, caught and displayed

Verification

npx tsc --noEmit admin
npx eslint on changed files
./scripts/verify.sh green
Manual: click on SKU → edit → save; same for EAN and Stock

2.8 KiB Raw Blame History