From ff6f3359aaab03d5a1f60291c464ba8670d70165 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 10 Sep 2026 03:25:33 -0400
Subject: [PATCH] feat: extract inventory images workflow step

---
 .../molecules/InventoryImagesStep.scss        | 58 +++++++++++++++++++
 .../molecules/InventoryImagesStep.stories.js  | 15 +++++
 .../molecules/InventoryImagesStep.vue         | 30 ++++++++++
 apps/web/src/pages/AdminHomePage.vue          | 11 ++--
 docs/IMPLEMENTATION-STATUS.md                 |  1 +
 5 files changed, 109 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/molecules/InventoryImagesStep.scss
 create mode 100644 apps/web/src/components/molecules/InventoryImagesStep.stories.js
 create mode 100644 apps/web/src/components/molecules/InventoryImagesStep.vue

diff --git a/apps/web/src/components/molecules/InventoryImagesStep.scss b/apps/web/src/components/molecules/InventoryImagesStep.scss
new file mode 100644
index 0000000..45ff21f
--- /dev/null
+++ b/apps/web/src/components/molecules/InventoryImagesStep.scss
@@ -0,0 +1,58 @@
+.inventory-images-step {
+  display: grid;
+  gap: var(--space-4);
+  grid-column: 1 / -1;
+  border: var(--border-thin) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  background: var(--color-surface);
+}
+
+.inventory-images-step__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.inventory-images-step__intro {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.inventory-images-step__count {
+  align-self: start;
+  color: var(--color-warning-text);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.inventory-images-step__list {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.inventory-images-step__list li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-top: var(--border-thin) solid var(--color-border);
+}
+
+.inventory-images-step__list a {
+  color: var(--color-interactive-text);
+  font-weight: var(--weight-semibold);
+}
+
+@media (max-width: 640px) {
+  .inventory-images-step__header,
+  .inventory-images-step__list li {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
diff --git a/apps/web/src/components/molecules/InventoryImagesStep.stories.js b/apps/web/src/components/molecules/InventoryImagesStep.stories.js
new file mode 100644
index 0000000..a7e9ebd
--- /dev/null
+++ b/apps/web/src/components/molecules/InventoryImagesStep.stories.js
@@ -0,0 +1,15 @@
+import InventoryImagesStep from './InventoryImagesStep.vue';
+
+export default { title: 'Molecules/InventoryImagesStep', component: InventoryImagesStep };
+
+export const MissingImages = {
+  args: {
+    missingImages: 2,
+    inventory: [
+      { id: 'copy-1', status: 'ACTIVE' },
+      { id: 'copy-2', status: 'ACTIVE' },
+    ],
+  },
+};
+
+export const Empty = { args: { missingImages: 0, inventory: [] } };
diff --git a/apps/web/src/components/molecules/InventoryImagesStep.vue b/apps/web/src/components/molecules/InventoryImagesStep.vue
new file mode 100644
index 0000000..cb7f69e
--- /dev/null
+++ b/apps/web/src/components/molecules/InventoryImagesStep.vue
@@ -0,0 +1,30 @@
+<script setup>
+defineProps({
+  inventory: { type: Array, required: true },
+  missingImages: { type: Number, default: 0 },
+});
+</script>
+
+<template>
+  <section id="workflow-images" class="inventory-images-step" aria-labelledby="inventory-images-step-title">
+    <div class="inventory-images-step__header">
+      <div>
+        <p class="catalog-kicker">Step 4</p>
+        <h2 id="inventory-images-step-title">Add Images</h2>
+        <p class="inventory-images-step__intro">Add clear photos to each physical copy before publishing its listing.</p>
+      </div>
+      <span class="inventory-images-step__count">{{ missingImages }} missing</span>
+    </div>
+    <p v-if="!inventory.length" class="state state--empty">Create a physical copy before adding images.</p>
+    <ul v-else class="inventory-images-step__list">
+      <li v-for="item in inventory" :key="item.id">
+        <span>{{ item.id }} · {{ item.status }}</span>
+        <a :href="`/admin/inventory/${item.id}/images`">Manage images</a>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@use './InventoryImagesStep.scss';
+</style>
diff --git a/apps/web/src/pages/AdminHomePage.vue b/apps/web/src/pages/AdminHomePage.vue
index 2967582..a5dad90 100644
--- a/apps/web/src/pages/AdminHomePage.vue
+++ b/apps/web/src/pages/AdminHomePage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, onMounted, ref } from "vue";
-import { RouterLink } from "vue-router";
 
 import { useAuth } from "@/composables/useAuth.js";
 import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
@@ -8,6 +7,7 @@ import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowSt
 import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
 import ProviderMappingStep from "@/components/molecules/ProviderMappingStep.vue";
 import InventoryCopyStep from "@/components/molecules/InventoryCopyStep.vue";
+import InventoryImagesStep from "@/components/molecules/InventoryImagesStep.vue";
 import {
   createAdminInventory,
   createAdminProduct,
@@ -988,7 +988,6 @@ onMounted(load);
       class="admin-list"
       aria-labelledby="inventory-title"
     >
-      <span id="workflow-images" aria-hidden="true"></span>
       <h2 id="inventory-title">Physical inventory</h2>
       <div class="admin-list__actions">
         <button
@@ -1051,12 +1050,12 @@ onMounted(load);
           </label>
           <span v-else>{{ item.id }}</span>
           · {{ item.status }}
-          <RouterLink
-            :to="{ name: 'admin-image-manager', params: { id: item.id } }"
-            >Manage images</RouterLink
-          >
         </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"
diff --git a/docs/IMPLEMENTATION-STATUS.md b/docs/IMPLEMENTATION-STATUS.md
index 7b3d868..3169938 100644
--- a/docs/IMPLEMENTATION-STATUS.md
+++ b/docs/IMPLEMENTATION-STATUS.md
@@ -170,6 +170,7 @@ Remaining roadmap areas are approved external provider credentials/adapters, bro
 - Product identification is now an extracted `ProductIdentityStep` molecule with empty/filled Storybook states, while preserving the existing create-product API workflow.
 - Source mapping is now an extracted `ProviderMappingStep` molecule with Product/Provider/PRODUCT-vs-SEARCH mapping states, while preserving existing mapping loading and save behavior.
 - Physical inventory creation is now an extracted `InventoryCopyStep` molecule with Product and condition selection states, while preserving the existing seller-scoped create-copy API workflow.
+- Image management is now surfaced as an extracted `InventoryImagesStep` molecule with missing-image status and direct links to the existing upload/processing manager route.
 - Public catalog sorting now supports latest manual/calculated market value low-to-high and high-to-low, with null values placed last.
 - Public catalog filters now collapse behind an accessible mobile disclosure, show an active-filter count, and provide a reset action while preserving URL synchronization.