feat(admin): implement product image upload & gallery management (Plan 04)

- Add Next.js API route for server-side Cloudinary upload with structured
  public_id (the-pet-loft/products/{id}/main|gallery-n) and asset_folder
  for portal folder visibility in dynamic folder mode
- Add background removal flow via Image Processing API with side-by-side
  original vs processed preview (Skeleton while loading)
- Dual upload buttons: processed (background removed) or original file
- Horizontal drag-and-drop image gallery using @dnd-kit/sortable with
  horizontalListSortingStrategy; reorder persisted via reorderImages mutation
- Per-image delete with AlertDialog confirmation
- 180° rotation technique for card layout: drag handle top, image center,
  delete bottom
- Debounced product search (300 ms) with inline results (max 3); clears
  gallery state when search input is cleared
- Install: cloudinary, @dnd-kit/core/sortable/utilities, embla-carousel-react,
  ShadCN carousel component
- Configure next.config.js with Cloudinary remote image pattern
- Mark checklist items 3.5 and 3.6 complete

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 06:45:03 +03:00
parent 5168553bae
commit 1ea527ca1f
11 changed files with 1363 additions and 2 deletions

View File

@@ -58,8 +58,8 @@ Features are grouped into **MVP** (required for launch) and **Post-MVP** (phased
| 3.2 | Create product form | `[x]` UI | Backend: `products.create`. Form: name, slug, description, status, category, tags. |
| 3.3 | Edit product form | `[x]` UI | Backend: `products.update`. Pre-populated form with all fields. |
| 3.4 | Archive/restore product | `[x]` UI | Backend: `products.archive`. Confirmation dialog. Restore via edit status field. |
| 3.5 | Product image upload | `[ ]` BE+UI | Need Convex file storage upload flow → `products.addImage`. Currently `addImage` takes a URL; need `generateUploadUrl` + upload action. |
| 3.6 | Image gallery management | `[~]` UI | Backend: `addImage`, `deleteImage`, `reorderImages`. Drag-and-drop reorder UI. |
| 3.5 | Product image upload | `[x]` BE+UI | Cloudinary server-side upload via Next.js API route (`/api/upload-image`). Background removal (Image Processing API) with dual upload: processed or original. Structured `public_id` + `asset_folder` per product. |
| 3.6 | Image gallery management | `[x]` UI | Drag-and-drop reorder (`@dnd-kit`) with `reorderImages` mutation. Per-image delete with AlertDialog. "Add more" tile. Search-driven product selection with auto-clear. |
| 3.7 | Variant management | `[~]` UI | Backend: `addVariant`, `updateVariant`, `deleteVariant`. Inline table or modal for CRUD. |
| 3.8 | Stock quantity editing | `[~]` UI | Backend: `updateVariant` accepts `stockQuantity`. Inline edit in variant table. |
| 3.9 | Price and compare-at-price editing | `[~]` UI | Backend: `updateVariant` accepts `price`, `compareAtPrice`. |