feat: extract inventory copy workflow step

apps/web/src/components/molecules/InventoryCopyStep.scss

@@ -0,0 +1,9 @@
+.inventory-copy-step {
+  align-content: start;
+}
+
+.inventory-copy-step__intro {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}

apps/web/src/components/molecules/InventoryCopyStep.stories.js

@@ -0,0 +1,12 @@
+import InventoryCopyStep from './InventoryCopyStep.vue';
+
+export default { title: 'Molecules/InventoryCopyStep', component: InventoryCopyStep };
+
+const products = [{ id: 'product-1', name: 'Charizard ex #199/165' }];
+const conditions = [
+  { id: 'condition-1', name: 'Near Mint', code: 'NM' },
+  { id: 'condition-2', name: 'Lightly Played', code: 'LP' },
+];
+
+export const Empty = { args: { productId: '', conditionId: '', products, conditions } };
+export const Selected = { args: { productId: 'product-1', conditionId: 'condition-1', products, conditions } };

apps/web/src/components/molecules/InventoryCopyStep.vue

@@ -0,0 +1,54 @@
+<script setup>
+defineProps({
+  productId: { type: String, required: true },
+  conditionId: { type: String, required: true },
+  products: { type: Array, required: true },
+  conditions: { type: Array, required: true },
+  isSaving: { type: Boolean, default: false },
+});
+
+defineEmits(['update:productId', 'update:conditionId', 'submit']);
+</script>
+
+<template>
+  <form id="workflow-inventory" class="showcase-panel inventory-copy-step" @submit.prevent="$emit('submit')">
+    <div>
+      <p class="catalog-kicker">Step 3</p>
+      <h2>Add a Physical Copy</h2>
+      <p class="inventory-copy-step__intro">Track each owned copy separately so condition, images, pricing, and sale history stay precise.</p>
+    </div>
+    <label class="fixture-label" for="inventory-product">Product</label>
+    <select
+      id="inventory-product"
+      :value="productId"
+      class="fixture-input"
+      required
+      @change="$emit('update:productId', $event.target.value)"
+    >
+      <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="inventory-condition">Condition</label>
+    <select
+      id="inventory-condition"
+      :value="conditionId"
+      class="fixture-input"
+      required
+      @change="$emit('update:conditionId', $event.target.value)"
+    >
+      <option value="" disabled>Select a condition</option>
+      <option v-for="condition in conditions" :key="condition.id" :value="condition.id">
+        {{ condition.name }} ({{ condition.code }})
+      </option>
+    </select>
+    <button class="button button--primary" type="submit" :disabled="isSaving">
+      Create physical copy
+    </button>
+  </form>
+</template>
+
+<style scoped lang="scss">
+@use './InventoryCopyStep.scss';
+</style>

apps/web/src/pages/AdminHomePage.vue

@@ -7,6 +7,7 @@ import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
 import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue";
 import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
 import ProviderMappingStep from "@/components/molecules/ProviderMappingStep.vue";
+import InventoryCopyStep from "@/components/molecules/InventoryCopyStep.vue";
 import {
   createAdminInventory,
   createAdminProduct,
@@ -702,48 +703,16 @@ onMounted(load);
         @product-change="loadProviderMappings($event)"
         @submit="createProviderMapping"
       />
-      <form id="workflow-inventory" class="showcase-panel" @submit.prevent="createInventory">
-        <h2>Add inventory copy</h2>
-        <label class="fixture-label" for="inventory-product">Product</label>
-        <select
-          id="inventory-product"
-          v-model="inventoryProductId"
-          class="fixture-input"
-          required
-        >
-          <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="inventory-condition">Condition</label>
-        <select
-          id="inventory-condition"
-          v-model="conditionId"
-          class="fixture-input"
-          required
-        >
-          <option value="" disabled>Select a condition</option>
-          <option
-            v-for="condition in conditions"
-            :key="condition.id"
-            :value="condition.id"
-          >
-            {{ condition.name }} ({{ condition.code }})
-          </option>
-        </select>
-        <button
-          class="button button--primary"
-          type="submit"
-          :disabled="isSaving"
-        >
-          Create copy
-        </button>
-      </form>
+      <InventoryCopyStep
+        :product-id="inventoryProductId"
+        :condition-id="conditionId"
+        :products="products"
+        :conditions="conditions"
+        :is-saving="isSaving"
+        @update:product-id="inventoryProductId = $event"
+        @update:condition-id="conditionId = $event"
+        @submit="createInventory"
+      />
       <form id="workflow-listing" class="showcase-panel" @submit.prevent="createListing">
         <h2>Create listing draft</h2>
         <label class="fixture-label" for="listing-inventory"