feat: add provider mapping admin workflow

apps/web/src/pages/AdminHomePage.vue

@@ -10,6 +10,7 @@ import { createAdminSale, listAdminSales, voidAdminSale } from '@/services/admin
 import { createAdminAcquisition, listAdminAcquisitions } from '@/services/admin-acquisition-service.js';
 import { getAdminDashboard } from '@/services/admin-dashboard-service.js';
 import { addAdminPricingObservation, calculateAdminValuation, overrideAdminValuation } from '@/services/admin-pricing-service.js';
+import { createAdminProviderMapping, listAdminProviderMappings } from '@/services/admin-provider-mapping-service.js';
 
 const { principal } = useAuth();
 const products = ref([]);
@@ -48,6 +49,12 @@ const pricingPrice = ref('');
 const overridePrice = ref('');
 const overrideReason = ref('');
 const voidReasons = ref({});
+const mappingProductId = ref('');
+const mappingProviderId = ref('');
+const mappingType = ref('PRODUCT');
+const mappingExternalIdentifier = ref('');
+const mappingSearchQuery = ref('');
+const providerMappings = ref([]);
 
 function csrfToken() {
   return document.cookie.split('; ').find((value) => value.startsWith('pokemon_inventory_csrf='))?.split('=')[1] ?? '';
@@ -71,6 +78,28 @@ async function createProduct() {
   finally { isSaving.value = false; }
 }
 
+async function loadProviderMappings(productId = mappingProductId.value) {
+  if (!productId) { providerMappings.value = []; return; }
+  providerMappings.value = await listAdminProviderMappings(productId);
+}
+
+async function createProviderMapping() {
+  isSaving.value = true;
+  try {
+    const mapping = await createAdminProviderMapping(mappingProductId.value, {
+      providerId: mappingProviderId.value,
+      mappingType: mappingType.value,
+      externalIdentifier: mappingExternalIdentifier.value || undefined,
+      searchQuery: mappingSearchQuery.value || undefined,
+    }, csrfToken());
+    providerMappings.value.push(mapping);
+    mappingProviderId.value = '';
+    mappingExternalIdentifier.value = '';
+    mappingSearchQuery.value = '';
+  } catch (requestError) { error.value = requestError; }
+  finally { isSaving.value = false; }
+}
+
 async function createInventory() {
   isSaving.value = true;
   try {
@@ -218,6 +247,23 @@ onMounted(load);
         </select>
         <button class="button button--primary" type="submit" :disabled="isSaving">Create product</button>
       </form>
+      <form class="showcase-panel" @submit.prevent="createProviderMapping">
+        <h2>Link provider mapping</h2>
+        <label class="fixture-label" for="mapping-product">Product</label>
+        <select id="mapping-product" v-model="mappingProductId" class="fixture-input" required @change="loadProviderMappings()">
+          <option value="" disabled>Select a product</option>
+          <option v-for="product in products" :key="product.id" :value="product.id">{{ product.name }}</option>
+        </select>
+        <label class="fixture-label" for="mapping-provider">Provider ID</label>
+        <input id="mapping-provider" v-model="mappingProviderId" class="fixture-input" required placeholder="ebay" />
+        <label class="fixture-label" for="mapping-type">Mapping type</label>
+        <select id="mapping-type" v-model="mappingType" class="fixture-input"><option value="PRODUCT">Product</option><option value="SEARCH">Search</option></select>
+        <label class="fixture-label" for="mapping-external">External identifier</label>
+        <input id="mapping-external" v-model="mappingExternalIdentifier" class="fixture-input" />
+        <label class="fixture-label" for="mapping-query">Search query</label>
+        <input id="mapping-query" v-model="mappingSearchQuery" class="fixture-input" />
+        <button class="button button--primary" type="submit" :disabled="isSaving">Save provider mapping</button>
+      </form>
       <form class="showcase-panel" @submit.prevent="createInventory">
         <h2>Add inventory copy</h2>
         <label class="fixture-label" for="inventory-product">Product</label>
@@ -304,6 +350,11 @@ onMounted(load);
       <p v-if="!products.length && !isLoading" class="state state--empty">No products yet.</p>
       <ul v-else><li v-for="product in products" :key="product.id">{{ product.name }} <span>{{ product.id }}</span></li></ul>
     </section>
+    <section class="admin-list" aria-labelledby="provider-mappings-title">
+      <h2 id="provider-mappings-title">Active provider mappings</h2>
+      <p v-if="!providerMappings.length" class="state state--empty">Select a product to view mappings.</p>
+      <ul v-else><li v-for="mapping in providerMappings" :key="mapping.id">{{ mapping.providerId }} · {{ mapping.mappingType }} · {{ mapping.externalIdentifier ?? mapping.searchQuery }}</li></ul>
+    </section>
     <section class="admin-list" aria-labelledby="inventory-title">
       <h2 id="inventory-title">Physical inventory</h2>
       <p v-if="!inventory.length && !isLoading" class="state state--empty">No physical copies yet.</p>