feat: build true guided inventory workflow wizard

apps/web/src/pages/AdminHomePage.vue

@@ -56,6 +56,17 @@ import {
 } from "@/services/admin-provider-mapping-service.js";
 
 const { principal } = useAuth();
+const WIZARD_STEP_IDS = [
+  "workflow-product",
+  "workflow-mapping",
+  "workflow-inventory",
+  "workflow-images",
+  "workflow-pricing",
+  "workflow-listing",
+];
+const WIZARD_STORAGE_KEY = "pokemon-inventory:admin-wizard-step";
+const activeStepId = ref(WIZARD_STEP_IDS[0]);
+const activeStepIndex = computed(() => WIZARD_STEP_IDS.indexOf(activeStepId.value));
 const products = ref([]);
 const inventory = ref([]);
 const selectedInventoryIds = ref([]);
@@ -538,7 +549,25 @@ async function voidSale(saleId) {
   }
 }
 
+function goToStep(stepId) {
+  if (!WIZARD_STEP_IDS.includes(stepId)) return;
+  activeStepId.value = stepId;
+  localStorage.setItem(WIZARD_STORAGE_KEY, stepId);
+}
+
+function goToNextStep() {
+  goToStep(WIZARD_STEP_IDS[Math.min(activeStepIndex.value + 1, WIZARD_STEP_IDS.length - 1)]);
+}
+
+function goToPreviousStep() {
+  goToStep(WIZARD_STEP_IDS[Math.max(activeStepIndex.value - 1, 0)]);
+}
+
 onMounted(load);
+onMounted(() => {
+  const storedStepId = localStorage.getItem(WIZARD_STORAGE_KEY);
+  if (storedStepId && WIZARD_STEP_IDS.includes(storedStepId)) activeStepId.value = storedStepId;
+});
 </script>
 
 <template>
@@ -677,10 +706,11 @@ onMounted(load);
       </dl>
     </section>
 
-    <InventoryWorkflowStepper :steps="workflowSteps" />
+    <InventoryWorkflowStepper :steps="workflowSteps" :active-step-id="activeStepId" @select="goToStep" />
 
-    <div class="admin-workspace-grid">
+    <div class="admin-wizard">
       <ProductIdentityStep
+        v-show="activeStepId === 'workflow-product'"
         :product-name="productName"
         :category-id="categoryId"
         :categories="categories"
@@ -690,6 +720,7 @@ onMounted(load);
         @submit="createProduct"
       />
       <ProviderMappingStep
+        v-show="activeStepId === 'workflow-mapping'"
         :product-id="mappingProductId"
         :provider-id="mappingProviderId"
         :mapping-type="mappingType"
@@ -706,6 +737,7 @@ onMounted(load);
         @submit="createProviderMapping"
       />
       <InventoryCopyStep
+        v-show="activeStepId === 'workflow-inventory'"
         :product-id="inventoryProductId"
         :condition-id="conditionId"
         :products="products"
@@ -715,7 +747,34 @@ onMounted(load);
         @update:condition-id="conditionId = $event"
         @submit="createInventory"
       />
+      <InventoryImagesStep
+        v-show="activeStepId === 'workflow-images'"
+        :inventory="inventory"
+        :missing-images="dashboard?.counts.missingImages ?? 0"
+      />
+      <PricingReviewStep
+        v-show="activeStepId === 'workflow-pricing'"
+        :inventory-item-id="pricingInventoryId"
+        :provider="pricingProvider"
+        :source-identifier="pricingSource"
+        :observed-price="pricingPrice"
+        :override-price="overridePrice"
+        :override-reason="overrideReason"
+        :inventory="inventory"
+        :refresh-status="refreshStatus"
+        :is-saving="isSaving"
+        @update:inventory-item-id="pricingInventoryId = $event"
+        @update:provider="pricingProvider = $event"
+        @update:source-identifier="pricingSource = $event"
+        @update:observed-price="pricingPrice = $event"
+        @update:override-price="overridePrice = $event"
+        @update:override-reason="overrideReason = $event"
+        @calculate="calculatePricing"
+        @refresh="refreshPricing"
+        @override="overridePricing"
+      />
       <ReviewListStep
+        v-show="activeStepId === 'workflow-listing'"
         :inventory-item-id="listingInventoryId"
         :asking-price="askingPrice"
         :inventory="inventory"
@@ -724,6 +783,13 @@ onMounted(load);
         @update:asking-price="askingPrice = $event"
         @submit="createListing"
       />
+      <div class="admin-wizard__nav">
+        <button class="button button--secondary" type="button" :disabled="activeStepIndex === 0" @click="goToPreviousStep">Back</button>
+        <button class="button button--secondary" type="button" :disabled="activeStepIndex === WIZARD_STEP_IDS.length - 1" @click="goToNextStep">Next</button>
+      </div>
+    </div>
+
+    <div class="admin-workspace-grid">
       <form class="showcase-panel" @submit.prevent="recordSale">
         <h2>Record sale</h2>
         <label class="fixture-label" for="sale-inventory">Inventory copy</label>
@@ -846,26 +912,6 @@ onMounted(load);
           Record acquisition
         </button>
       </form>
-      <PricingReviewStep
-        :inventory-item-id="pricingInventoryId"
-        :provider="pricingProvider"
-        :source-identifier="pricingSource"
-        :observed-price="pricingPrice"
-        :override-price="overridePrice"
-        :override-reason="overrideReason"
-        :inventory="inventory"
-        :refresh-status="refreshStatus"
-        :is-saving="isSaving"
-        @update:inventory-item-id="pricingInventoryId = $event"
-        @update:provider="pricingProvider = $event"
-        @update:source-identifier="pricingSource = $event"
-        @update:observed-price="pricingPrice = $event"
-        @update:override-price="overridePrice = $event"
-        @update:override-reason="overrideReason = $event"
-        @calculate="calculatePricing"
-        @refresh="refreshPricing"
-        @override="overridePricing"
-      />
     </div>
 
     <section class="admin-list" aria-labelledby="products-title">
@@ -960,10 +1006,6 @@ onMounted(load);
           · {{ item.status }}
         </li>
       </ul>
-      <InventoryImagesStep
-        :inventory="inventory"
-        :missing-images="dashboard?.counts.missingImages ?? 0"
-      />
       <ul v-if="hasValuations" aria-label="Market valuations">
         <li
           v-for="(valuation, inventoryItemId) in valuations"