feat: extract product identity workflow step

apps/web/src/pages/AdminHomePage.vue

@@ -5,6 +5,7 @@ import { RouterLink } from "vue-router";
 import { useAuth } from "@/composables/useAuth.js";
 import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
 import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue";
+import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
 import {
   createAdminInventory,
   createAdminProduct,
@@ -675,39 +676,15 @@ onMounted(load);
     <InventoryWorkflowStepper :steps="workflowSteps" />
 
     <div class="admin-workspace-grid">
-      <form id="workflow-product" class="showcase-panel" @submit.prevent="createProduct">
-        <h2>Add product</h2>
-        <label class="fixture-label" for="product-name">Name</label>
-        <input
-          id="product-name"
-          v-model="productName"
-          class="fixture-input"
-          required
-        />
-        <label class="fixture-label" for="product-category">Category</label>
-        <select
-          id="product-category"
-          v-model="categoryId"
-          class="fixture-input"
-          required
-        >
-          <option value="" disabled>Select a category</option>
-          <option
-            v-for="category in categories"
-            :key="category.id"
-            :value="category.id"
-          >
-            {{ category.name }}
-          </option>
-        </select>
-        <button
-          class="button button--primary"
-          type="submit"
-          :disabled="isSaving"
-        >
-          Create product
-        </button>
-      </form>
+      <ProductIdentityStep
+        :product-name="productName"
+        :category-id="categoryId"
+        :categories="categories"
+        :is-saving="isSaving"
+        @update:product-name="productName = $event"
+        @update:category-id="categoryId = $event"
+        @submit="createProduct"
+      />
       <form id="workflow-mapping" class="showcase-panel" @submit.prevent="createProviderMapping">
         <h2>Link provider mapping</h2>
         <label class="fixture-label" for="mapping-product">Product</label>