feat: add admin lookup forms

apps/web/src/pages/AdminHomePage.vue

@@ -3,11 +3,13 @@ import { onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 
 import { useAuth } from '@/composables/useAuth.js';
-import { createAdminInventory, createAdminProduct, listAdminInventory, listAdminProducts } from '@/services/admin-catalog-service.js';
+import { createAdminInventory, createAdminProduct, listAdminCategories, listAdminConditions, listAdminInventory, listAdminProducts } from '@/services/admin-catalog-service.js';
 
 const { principal } = useAuth();
 const products = ref([]);
 const inventory = ref([]);
+const categories = ref([]);
+const conditions = ref([]);
 const isLoading = ref(true);
 const isSaving = ref(false);
 const error = ref(null);
@@ -23,7 +25,7 @@ function csrfToken() {
 async function load() {
   isLoading.value = true;
   try {
-    [products.value, inventory.value] = await Promise.all([listAdminProducts(), listAdminInventory()]);
+    [products.value, inventory.value, categories.value, conditions.value] = await Promise.all([listAdminProducts(), listAdminInventory(), listAdminCategories(), listAdminConditions()]);
   } catch (requestError) { error.value = requestError; }
   finally { isLoading.value = false; }
 }
@@ -63,16 +65,25 @@ onMounted(load);
         <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 ID</label>
-        <input id="product-category" v-model="categoryId" 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>
       <form class="showcase-panel" @submit.prevent="createInventory">
         <h2>Add inventory copy</h2>
-        <label class="fixture-label" for="inventory-product">Product ID</label>
-        <input id="inventory-product" v-model="inventoryProductId" class="fixture-input" required />
-        <label class="fixture-label" for="inventory-condition">Condition ID</label>
-        <input id="inventory-condition" v-model="conditionId" class="fixture-input" required />
+        <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>
     </div>

apps/web/src/services/admin-catalog-service.js

@@ -13,6 +13,8 @@ async function request(path, options = {}) {
 
 export function listAdminProducts() { return request('/admin/products'); }
 export function listAdminInventory() { return request('/admin/inventory'); }
+export function listAdminCategories() { return request('/admin/lookups/categories'); }
+export function listAdminConditions() { return request('/admin/lookups/conditions'); }
 
 export function createAdminProduct(input, csrfToken) {
   return request('/admin/products', { method: 'POST', headers: { 'x-csrf-token': csrfToken }, body: JSON.stringify(input) });