# Product Center Backend Integration Implementation Plan

**Goal:** Make product-center countries, categories, tag filters, and their icons fully driven by backend configuration while matching the Figma assets.

**Architecture:** Store Figma-derived icons as versioned API static assets and update existing database records through an idempotent Prisma script. The website resolves backend-relative asset URLs against `backendUrl` and builds filter controls from backend tag-group membership rather than sort-order guesses or tag-name allowlists.

**Tech Stack:** NestJS, Prisma, PostgreSQL, Nuxt 4, Vue 3, Vitest, Jest.

---

### Task 1: Backend Icon Assets and Configuration Script

- [x] Export country and top-level category icons from Figma into `apps/api/public/product-center`.
- [x] Serve committed API assets under `/assets/`.
- [x] Add an idempotent Prisma script that updates matching country/category icon fields.
- [x] Run the script against the configured database and verify public API values.

### Task 2: Website Backend Asset Resolution

- [x] Add failing tests for absolute, data, and backend-relative icon URLs.
- [x] Implement URL resolution in the product-center data mapper.
- [x] Verify country and category components render API-provided icons.

### Task 3: Backend-Driven Tag Groups

- [x] Add failing component tests using backend group IDs/names.
- [x] Pass tag groups into `ProductTagFilter` and derive logistics/process groups from backend metadata.
- [x] Remove sort-order and tag-name allowlist assumptions.

### Task 4: End-to-End Verification

- [x] Run website and API tests/builds.
- [x] Verify public endpoints contain durable icon URLs.
- [x] Browser-test icons and filters on `/product-center`.