@ketvietlab/ketsuite 0.1.2 → 0.1.3

package/dist/modules/product_backend/routes.js

@@ -1,14 +1,13 @@
 import { randomUUID } from 'node:crypto';
 import { NAVIGATION_TYPE, encodeListState, fragment, json, parseListState, table, text, validateListState, withHeaders, } from '@ketvietlab/ketjs';
-import { favoriteScreen, PRODUCT_DETAIL_TABS, productDetailScreen, productsScreen, VARIANT_DETAIL_TABS, variantScreen, VIEWS, } from './screens.js';
-import { attributesScreen } from './attributes-screen.js';
-import { newProductScreen } from './create-screen.js';
-import { timezoneOf, viewerOf } from '../backend/routes.js';
+import { attributesScreen, favoriteModal, newProductScreen, PRODUCT_DETAIL_TABS, productDetailScreen, productsScreen, VARIANT_DETAIL_TABS, variantScreen, VIEWS, } from './screens/index.js';
+import { attributeControl, attributeValuesControl, brandControl, categoryControl, uomControl, } from './relation-control.js';
 import { PAGE_SIZE, colsHref, colsOf, pager, withParam } from '../backend/paging.js';
-import { backendPage } from '../../ui/index.js';
+import { backendPage, modalWorkspace } from '../../ui/index.js';
 import { receiveAttachment } from '../storage/routes.js';
 import { errorsOf, readForm, seeOther } from '../backend/forms.js';
 import { productListSearch } from '../product/search.js';
+import { adminPage, frameOf, inLocale, localeQuery, timezoneOf } from '../backend/screen.js';
 const crossSite = (req) => {
     const origin = req.headers.origin;
     if (!origin)
@@ -20,23 +19,35 @@ const crossSite = (req) => {
         return true;
     }
 };
-const localeSuffix = (url) => {
-    const lang = url.searchParams.get('lang');
-    return lang ? `?lang=${encodeURIComponent(lang)}` : '';
-};
-const inLocale = (url, path) => {
-    const target = new URL(path, 'http://ket.local');
-    const lang = url.searchParams.get('lang');
-    if (lang)
-        target.searchParams.set('lang', lang);
-    return `${target.pathname}${target.search}`;
-};
+/**
+ * The two things every mutating route here has to establish before it reads a form.
+ *
+ * The admin authenticates with a session cookie, so a POST that arrives from
+ * another origin carries the signed-in user's credentials without their intent —
+ * which is why every write in this module refuses one, the same way user_backend,
+ * company_backend and oauth_backend do.
+ */
+const refusePost = (req, accepts = 'POST') => req.method !== 'POST'
+    ? text(accepts, { status: 405 })
+    : crossSite(req)
+        ? text('Forbidden', { status: 403 })
+        : null;
 const productTabOf = (url) => {
     const asked = url.searchParams.get('tab');
     return PRODUCT_DETAIL_TABS.includes(asked ?? '')
         ? asked
         : 'general';
 };
+const MEDIA_VARIANT_PAGE_SIZE = 25;
+const VARIANT_PAGE_SIZE = 10;
+const positivePage = (value) => {
+    const page = Number.parseInt(value ?? '1', 10);
+    return Number.isFinite(page) && page > 0 ? page : 1;
+};
+const requestedVariantMediaPage = (url) => {
+    return positivePage(url.searchParams.get('variantPage'));
+};
+const requestedVariantPage = (url) => positivePage(url.searchParams.get('page'));
 const variantTabOf = (url) => {
     const asked = url.searchParams.get('tab');
     return VARIANT_DETAIL_TABS.includes(asked ?? '')
@@ -45,35 +56,60 @@ const variantTabOf = (url) => {
 };
 const isProductPartial = (req, scope = 'product-detail') => req.headers['x-ket-partial'] === scope;
 const seeProduct = (id, url, tab = productTabOf(url)) => withHeaders(text('', { status: 303 }), {
-    location: inLocale(url, `/admin/products/${id}?tab=${tab}`),
-});
-const seeVariant = (templateId, productId, url, tab = variantTabOf(url)) => seeOther(inLocale(url, `/admin/products/${templateId}/variants/${productId}?tab=${tab}`));
-const frameFor = async (ctx, url, req) => ({
-    navigation: req.headers['x-ket-navigation'] === 'fragment-v1',
-    viewer: await viewerOf(ctx, url, req),
-    menu: await ctx.menu(url, req),
-    extras: {
-        'nav.items': await ctx.joint(url, req, 'backend:nav.items', { active: url.pathname }),
-        'topbar.end': await ctx.joint(url, req, 'backend:topbar.end'),
-        'sidebar.foot': req.headers['x-ket-navigation'] === 'fragment-v1'
-            ? undefined
-            : await ctx.joint(url, req, 'backend:sidebar.foot', {
-                lang: ctx.localeOf(url, req),
-            }),
-    },
+    location: inLocale(url, `/admin/product/templates/${id}?tab=${tab}`),
 });
+const seeVariant = (templateId, productId, url, tab = variantTabOf(url)) => seeOther(inLocale(url, `/admin/product/templates/${templateId}/variants/${productId}?tab=${tab}`));
 const optionsFor = async (ctx, url, req) => {
-    const [units, categories, attributes] = (await Promise.all([
+    const live = await ctx.live(req);
+    const taxEnabled = Boolean(live.functions['account.listTaxes']);
+    const [units, categories, attributes, brands, taxes] = (await Promise.all([
         ctx.call('uom.listUnits', {}, url, req),
         ctx.call('product.listCategories', {}, url, req),
         ctx.call('product.listAttributes', {}, url, req),
+        ctx.call('product.listBrands', {}, url, req),
+        taxEnabled ? ctx.call('account.listTaxes', { typeTaxUse: 'sale' }, url, req) : Promise.resolve([]),
     ]));
+    const variantAttributes = attributes.filter((row) => row.createVariant !== 'no_variant');
     return {
+        // Kept raw alongside the options so a caller can reach `parentPath` and work
+        // out which unit tree a template sits in.
+        unitRows: units,
         uoms: units.map((row) => ({ value: String(row.id), label: String(row.name) })),
-        categories: categories.map((row) => ({ value: String(row.id), label: String(row.name) })),
-        attributes: attributes.map((row) => ({ value: String(row.id), label: String(row.name) })),
+        categories: categories.map((row) => ({
+            value: String(row.id),
+            label: String(row.name),
+            // The ancestry, so two "Shirts" under different parents stay distinguishable.
+            description: row.path == null ? null : String(row.path),
+        })),
+        brands: brands.map((row) => ({ value: String(row.id), label: String(row.name) })),
+        taxes: taxes.map((row) => ({ value: String(row.id), label: String(row.name) })),
+        taxEnabled,
+        variantAttributes: variantAttributes.map((row) => ({
+            value: String(row.id),
+            label: String(row.name),
+        })),
+        // Values come nested inside their attribute here, and carry the attribute's
+        // name as their description — the value picker spans every attribute, so
+        // "Đỏ" on its own would not say which attribute it belongs to.
+        attributeValues: variantAttributes.flatMap((attribute) => (Array.isArray(attribute.values) ? attribute.values : []).map((value) => ({
+            value: String(value.id),
+            label: String(value.name),
+            description: String(attribute.name),
+        }))),
     };
 };
+/**
+ * The root of the unit tree a template's default unit belongs to.
+ *
+ * A variant's unit is refused unless it shares this root, so the picker is given
+ * the root and offers nothing that would be rejected.
+ */
+const unitRootOf = (units, uomId) => {
+    if (uomId == null)
+        return null;
+    const unit = units.find((row) => String(row.id) === String(uomId));
+    return unit ? (String(unit.parentPath).split('/').filter(Boolean)[0] ?? null) : null;
+};
 const invalidErrors = (url, _) => url.searchParams.has('invalid') ? [_('product_backend.error.invalid')] : undefined;
 const stockEnabled = async (ctx, req) => Boolean((await ctx.live(req)).functions['stock.configureProduct']);
 const TRACKING = ['none', 'lot', 'serial'];
@@ -92,6 +128,7 @@ const templateRow = (row) => ({
     type: row.type,
     categoryId: row.categoryId,
     uomId: row.uomId,
+    listPrice: row.listPrice,
     variants: Array.isArray(row.variants) ? row.variants.length : 0,
 });
 const cloneState = (state) => ({
@@ -198,11 +235,8 @@ const productMenus = (_, url, state, spec, favorites) => {
         };
     });
     const returnTo = encodeListState({ ...cloneState(state), favoriteId: undefined }, url);
-    const saveUrl = new URL('/admin/products/favorites/new', url);
-    saveUrl.searchParams.set('returnTo', returnTo);
-    const lang = url.searchParams.get('lang');
-    if (lang)
-        saveUrl.searchParams.set('lang', lang);
+    const saveUrl = new URL(returnTo, url);
+    saveUrl.searchParams.set('modal', 'favorite');
     return [
         {
             id: 'filters',
@@ -309,14 +343,14 @@ const loadProductGroups = async (ctx, url, req, state, timezone, labels, path =
             ? await loadProductGroups(ctx, url, req, state, timezone, labels, nextPath)
             : undefined;
         const rows = open && path.length + 1 === state.groupBy.length
-            ? (await ctx.call('product.listTemplates', {
+            ? await labels.decorate((await ctx.call('product.listTemplates', {
                 state,
                 path: nextPath,
                 timezone,
                 withVariants: true,
                 limit: PAGE_SIZE,
                 offset: ((state.groupPages[JSON.stringify(nextPath)] ?? 1) - 1) * PAGE_SIZE,
-            }, url, req)).map(templateRow)
+            }, url, req)))
             : undefined;
         const pageKey = JSON.stringify(nextPath);
         const page = state.groupPages[pageKey] ?? 1;
@@ -366,7 +400,7 @@ const ownsVariantMedia = async (ctx, url, req, productId, mediaId) => (await var
  * URL. Nothing here holds state between requests.
  */
 export const routes = {
-    '/admin/products': (ctx) => async (url, req) => {
+    '/admin/product/templates': (ctx) => async (url, req) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
         const asked = url.searchParams.get('view');
@@ -435,13 +469,12 @@ export const routes = {
                 offset: (current - 1) * PAGE_SIZE,
             }, url, req));
         const { count } = (await ctx.call('product.countTemplates', { state, timezone }, url, req));
+        // The names are needed by every row, not only by a group header: a table
+        // that prints a category id where it means a category name is showing its
+        // own plumbing.
         const [categoryRows, unitRows] = (await Promise.all([
-            state.groupBy.some((group) => group.key === 'categoryId')
-                ? ctx.call('product.listCategories', {}, url, req)
-                : Promise.resolve([]),
-            state.groupBy.some((group) => group.key === 'uomId')
-                ? ctx.call('uom.listUnits', {}, url, req)
-                : Promise.resolve([]),
+            ctx.call('product.listCategories', {}, url, req),
+            ctx.call('uom.listUnits', {}, url, req),
         ]));
         const categoryMap = new Map();
         const collectCategories = (items) => {
@@ -452,64 +485,146 @@ export const routes = {
             }
         };
         collectCategories(categoryRows);
+        const unitMap = new Map(unitRows.map((row) => [String(row.id), String(row.name)]));
+        const canReadStock = Boolean((await ctx.live(req)).functions['stock.listProductConfigs']);
+        /** One media call per batch of rows, whether that batch is a page or a group. */
+        const decorate = async (batch) => {
+            if (!batch.length)
+                return [];
+            const templateIds = batch.map((row) => row.id);
+            const [media, stockConfigs] = (await Promise.all([
+                ctx.call('product_media.listPrimaryMedia', { templateIds }, url, req),
+                canReadStock
+                    ? ctx.call('stock.listProductConfigs', { templateIds }, url, req)
+                    : Promise.resolve([]),
+            ]));
+            const images = new Map(media.map((row) => [String(row.templateId), String(row.attachmentId)]));
+            const inventory = new Map(stockConfigs.map((row) => [String(row.templateId), Boolean(row.isStorable)]));
+            return batch.map((row) => {
+                const attachmentId = images.get(String(row.id));
+                return {
+                    ...templateRow(row),
+                    uomName: row.uomId ? (unitMap.get(String(row.uomId)) ?? null) : null,
+                    categoryName: row.categoryId ? (categoryMap.get(String(row.categoryId)) ?? null) : null,
+                    isStorable: canReadStock ? (inventory.get(String(row.id)) ?? false) : null,
+                    image: attachmentId ? { src: `/files/${attachmentId}`, alt: row.name } : null,
+                };
+            });
+        };
+        const decoratedRows = await decorate(rows);
         const groups = grouped
             ? await loadProductGroups(ctx, url, req, state, timezone, {
                 categories: categoryMap,
-                units: new Map(unitRows.map((row) => [String(row.id), String(row.name)])),
+                units: unitMap,
+                decorate,
             })
             : undefined;
-        const extras = {
-            'nav.items': await ctx.joint(url, req, 'backend:nav.items', { active: url.pathname }),
-            'topbar.end': await ctx.joint(url, req, 'backend:topbar.end'),
-            'sidebar.foot': req.headers['x-ket-navigation'] === 'fragment-v1'
-                ? undefined
-                : await ctx.joint(url, req, 'backend:sidebar.foot', { lang }),
-        };
-        return backendPage(ctx, req, {
-            lang,
+        const selection = view === 'list'
+            ? {
+                formId: 'product-template-bulk',
+                action: inLocale(url, '/admin/product/templates/bulk'),
+                hidden: { returnTo: `${url.pathname}${url.search}` },
+                actions: [
+                    { id: 'archive', label: _('backend.chrome.archive') },
+                    { id: 'delete', label: _('backend.chrome.delete'), tone: 'danger' },
+                ],
+            }
+            : undefined;
+        const extensionActions = await ctx.joint(url, req, 'product_backend:catalogue.actions', {
+            locale: localeQuery(url),
+        });
+        return adminPage(ctx, url, req, {
             title: 'KetSuite',
-            body: productsScreen(_, rows.map(templateRow), view, {
-                navigation: req.headers['x-ket-navigation'] === 'fragment-v1',
-                viewer: await viewerOf(ctx, url, req),
-                extras,
-                menu: await ctx.menu(url, req),
-                menuFilter: url.searchParams.get('menu')?.trim() || null,
-                chrome: {
-                    create: {
-                        label: _('product_backend.action.create'),
-                        path: inLocale(url, '/admin/products/new'),
-                    },
-                    search: {
-                        name: 'q',
-                        value: state.q ?? '',
-                        placeholder: _('product_backend.chrome.search'),
-                        keep: keepForSearch(url),
-                        facets: productFacets(_, url, state, spec),
-                        menus: productMenus(_, url, state, spec, favorites),
+            translate: false,
+            body: (_, frame) => {
+                const workspace = productsScreen(_, decoratedRows, view, {
+                    ...frame,
+                    chrome: {
+                        create: {
+                            label: _('product_backend.create.title'),
+                            path: inLocale(url, '/admin/product/templates/new'),
+                        },
+                        selection,
+                        search: {
+                            name: 'q',
+                            value: state.q ?? '',
+                            placeholder: _('product_backend.chrome.search'),
+                            keep: keepForSearch(url),
+                            facets: productFacets(_, url, state, spec),
+                            menus: productMenus(_, url, state, spec, favorites),
+                        },
+                        pager: grouped ? null : pager(url, current, rows.length, count),
+                        views: VIEWS.map((v) => ({
+                            id: v,
+                            label: _(`backend.chrome.view.${v}`),
+                            icon: v === 'kanban' ? 'layout-grid' : 'list',
+                            path: withParam(url, 'view', v),
+                            active: v === view,
+                        })),
                     },
-                    pager: grouped ? null : pager(url, current, rows.length, count),
-                    views: VIEWS.map((v) => ({
-                        id: v,
-                        label: _(`backend.chrome.view.${v}`),
-                        icon: v === 'kanban' ? 'layout-grid' : 'list',
-                        path: withParam(url, 'view', v),
-                        active: v === view,
-                    })),
-                },
-            }, { shown: colsOf(url), colsHref: colsHref(url), groups }, localeSuffix(url)),
+                }, { shown: colsOf(url), colsHref: colsHref(url), groups, selection }, localeQuery(url), count, extensionActions);
+                if (url.searchParams.get('modal') !== 'favorite')
+                    return workspace;
+                const returnUrl = new URL(url);
+                returnUrl.searchParams.delete('modal');
+                returnUrl.searchParams.delete('favoriteError');
+                const returnTo = `${returnUrl.pathname}${returnUrl.search}`;
+                return modalWorkspace(workspace, favoriteModal(_, returnTo, localeQuery(url), url.searchParams.has('favoriteError') ? [_('product_backend.favorite.invalid')] : undefined));
+            },
         });
     },
-    '/admin/products/favorites/new': (ctx) => async (url, req) => {
+    '/admin/product/templates/bulk': (ctx) => async (url, req) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
+        const form = await readForm(req);
+        const ids = Object.keys(form)
+            .filter((key) => key.startsWith('selected.'))
+            .map((key) => key.slice('selected.'.length))
+            .filter(Boolean);
+        const fallback = inLocale(url, '/admin/product/templates');
+        const returnTo = form.returnTo?.startsWith('/admin/product/templates') ? form.returnTo : fallback;
+        if (!ids.length)
+            return seeOther(returnTo);
+        if (form.action === 'archive') {
+            for (const id of ids)
+                await ctx.call('product.archiveTemplate', { id, active: false }, url, req);
+            return seeOther(returnTo);
+        }
+        if (form.action === 'delete') {
+            try {
+                await ctx.call('product.deleteTemplates', { ids }, url, req);
+                return seeOther(returnTo);
+            }
+            catch {
+                const failed = new URL(returnTo, 'http://ket.local');
+                failed.searchParams.set('bulkError', 'delete');
+                return seeOther(`${failed.pathname}${failed.search}`);
+            }
+        }
+        return text('Unknown bulk action', { status: 400 });
+    },
+    '/admin/product/templates/favorites/new': (ctx) => async (url, req) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
-        const form = req.method === 'POST' ? await readForm(req) : null;
-        if (req.method === 'POST' && crossSite(req))
-            return text('Forbidden', { status: 403 });
         if (req.method !== 'GET' && req.method !== 'POST')
             return text('GET or POST', { status: 405 });
-        const rawReturn = form?.returnTo ?? url.searchParams.get('returnTo') ?? '/admin/products';
+        // Refused before the body is read, not after.
+        if (req.method === 'POST' && crossSite(req))
+            return text('Forbidden', { status: 403 });
+        const form = req.method === 'POST' ? await readForm(req) : null;
+        const rawReturn = form?.returnTo ?? url.searchParams.get('returnTo') ?? '/admin/product/templates';
         const source = new URL(rawReturn, 'http://ket.local');
-        const returnTo = source.pathname === '/admin/products' ? `${source.pathname}${source.search}` : '/admin/products';
+        const returnTo = source.pathname === '/admin/product/templates'
+            ? `${source.pathname}${source.search}`
+            : '/admin/product/templates';
+        const modalHref = (invalid = false) => {
+            const target = new URL(returnTo, 'http://ket.local');
+            target.searchParams.set('modal', 'favorite');
+            if (invalid)
+                target.searchParams.set('favoriteError', '1');
+            return `${target.pathname}${target.search}`;
+        };
         if (req.method === 'POST') {
             const spec = productListSearch(table(ctx.manifest, 'product.Template'));
             const state = parseListState(spec, new URL(returnTo, 'http://ket.local')).state;
@@ -525,66 +640,73 @@ export const routes = {
                 state.favoriteId = id;
                 return seeOther(encodeListState(state, new URL(returnTo, 'http://ket.local')));
             }
-            return backendPage(ctx, req, {
-                lang,
-                title: _('product_backend.favorite.create'),
-                body: favoriteScreen(_, await frameFor(ctx, url, req), returnTo, localeSuffix(url), [
-                    _('product_backend.favorite.invalid'),
-                ]),
-            });
+            return seeOther(modalHref(true));
         }
-        return backendPage(ctx, req, {
-            lang,
-            title: _('product_backend.favorite.create'),
-            body: favoriteScreen(_, await frameFor(ctx, url, req), returnTo, localeSuffix(url)),
-        });
+        return seeOther(modalHref());
     },
-    '/admin/products/new': (ctx) => async (url, req) => {
+    '/admin/product/templates/new': (ctx) => async (url, req) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
         const hasStock = await stockEnabled(ctx, req);
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             if (hasStock && !validStockForm(form))
-                return seeOther(inLocale(url, '/admin/products/new?invalid=1&count=1'));
+                return seeOther(inLocale(url, '/admin/product/templates/new?invalid=1&count=1'));
             const id = randomUUID();
             const result = await ctx.call('product.saveTemplate', {
                 id,
                 name: form.name ?? '',
                 type: form.type || 'goods',
-                ...(form.uomId ? { uomId: form.uomId } : {}),
-                ...(form.categoryId ? { categoryId: form.categoryId } : {}),
+                // Sent as null rather than omitted: an absent key is skipped by the
+                // changeset, so leaving it out would make the form's empty "—" option
+                // a no-op and the field impossible to clear once set.
+                uomId: form.uomId || null,
+                categoryId: form.categoryId || null,
+                brandId: form.brandId || null,
+                origin: form.origin || null,
                 description: form.description || null,
                 listPrice: form.listPrice || '0',
                 saleOk: form.saleOk === '1',
                 purchaseOk: form.purchaseOk === '1',
+                ...(Object.hasOwn(form, 'defaultCode') ? { defaultCode: form.defaultCode || null } : {}),
+                ...(Object.hasOwn(form, 'barcode') ? { barcode: form.barcode || null } : {}),
             }, url, req);
             if (!result.ok)
-                return seeOther(inLocale(url, `/admin/products/new?invalid=1&count=${errorsOf(result).length}`));
+                return seeOther(inLocale(url, `/admin/product/templates/new?invalid=1&count=${errorsOf(result).length}`));
             if (hasStock) {
                 const stockResult = await configureStock(ctx, url, req, id, form);
                 if (!stockResult.ok)
-                    return seeOther(inLocale(url, `/admin/products/${id}?invalid=1&count=${errorsOf(stockResult).length}`));
+                    return seeOther(inLocale(url, `/admin/product/templates/${id}?invalid=1&count=${errorsOf(stockResult).length}`));
             }
             return seeProduct(id, url);
         }
         if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
         const options = await optionsFor(ctx, url, req);
-        return backendPage(ctx, req, {
-            lang,
-            title: _('product_backend.create.title'),
-            body: newProductScreen(_, { ...options, stockEnabled: hasStock, errors: invalidErrors(url, _) }, await frameFor(ctx, url, req), localeSuffix(url)),
+        const controls = {
+            uom: await uomControl(ctx, url, req, _, { id: 'product-create-uom', units: options.uoms }),
+            category: await categoryControl(ctx, url, req, _, {
+                id: 'product-create-category',
+                categories: options.categories,
+            }),
+        };
+        return adminPage(ctx, url, req, {
+            title: 'product_backend.create.title',
+            body: (_, frame) => newProductScreen(_, { ...options, stockEnabled: hasStock, errors: invalidErrors(url, _), controls }, frame, localeQuery(url)),
         });
     },
-    '/admin/product-attributes': (ctx) => async (url, req) => {
+    '/admin/product/attributes': (ctx) => async (url, req) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             const name = form.name?.trim();
             if (!name)
-                return seeOther(inLocale(url, '/admin/product-attributes?invalid=1'));
+                return seeOther(inLocale(url, '/admin/product/attributes?invalid=1'));
             const result = await ctx.call('product.saveAttribute', {
                 id: randomUUID(),
                 name,
@@ -594,25 +716,25 @@ export const routes = {
                 active: true,
             }, url, req);
             return result.ok
-                ? seeOther(inLocale(url, '/admin/product-attributes'))
-                : seeOther(inLocale(url, '/admin/product-attributes?invalid=1'));
+                ? seeOther(inLocale(url, '/admin/product/attributes'))
+                : seeOther(inLocale(url, '/admin/product/attributes?invalid=1'));
         }
         if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
         const rows = (await ctx.call('product.listAttributes', {}, url, req));
-        return backendPage(ctx, req, {
-            lang,
-            title: _('product_backend.attributes.title'),
-            body: attributesScreen(_, rows, await frameFor(ctx, url, req), invalidErrors(url, _), localeSuffix(url)),
+        return adminPage(ctx, url, req, {
+            title: 'product_backend.attributes.title',
+            body: (_, frame) => attributesScreen(_, rows, frame, invalidErrors(url, _), localeQuery(url)),
         });
     },
-    '/admin/product-attributes/{id}/values': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/attributes/{id}/values': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         const form = await readForm(req);
         const name = form.name?.trim();
         if (!name)
-            return seeOther(inLocale(url, '/admin/product-attributes?invalid=1'));
+            return seeOther(inLocale(url, '/admin/product/attributes?invalid=1'));
         const result = await ctx.call('product.saveAttributeValue', {
             id: randomUUID(),
             attributeId: params.id,
@@ -620,38 +742,49 @@ export const routes = {
             sequence: Number(form.sequence || 10),
         }, url, req);
         return result.ok
-            ? seeOther(inLocale(url, '/admin/product-attributes'))
-            : seeOther(inLocale(url, '/admin/product-attributes?invalid=1'));
+            ? seeOther(inLocale(url, '/admin/product/attributes'))
+            : seeOther(inLocale(url, '/admin/product/attributes?invalid=1'));
     },
-    '/admin/products/{id}': (ctx) => async (url, req, params) => {
+    '/admin/product/templates/{id}': (ctx) => async (url, req, params) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
+        const live = await ctx.live(req);
         const hasStock = await stockEnabled(ctx, req);
+        const hasProductTax = Boolean(live.functions['account.getProductTax'] && live.functions['account.setProductTax']);
         const activeTab = productTabOf(url);
         let savedPartial = false;
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const partial = isProductPartial(req);
             const form = await readForm(req);
             if (hasStock && !validStockForm(form)) {
                 if (partial)
                     return json({ ok: false, message: _('product_backend.error.invalid'), errors: ['tracking'] }, { status: 422 });
-                return seeOther(inLocale(url, `/admin/products/${params.id}?invalid=1&count=1`));
+                return seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1&count=1`));
             }
             const result = await ctx.call('product.saveTemplate', {
                 id: params.id,
                 name: form.name ?? '',
                 type: form.type || 'goods',
-                ...(form.uomId ? { uomId: form.uomId } : {}),
-                ...(form.categoryId ? { categoryId: form.categoryId } : {}),
+                // Sent as null rather than omitted: an absent key is skipped by the
+                // changeset, so leaving it out would make the form's empty "—" option
+                // a no-op and the field impossible to clear once set.
+                uomId: form.uomId || null,
+                categoryId: form.categoryId || null,
+                brandId: form.brandId || null,
+                origin: form.origin || null,
                 description: form.description || null,
                 listPrice: form.listPrice || '0',
                 saleOk: form.saleOk === '1',
                 purchaseOk: form.purchaseOk === '1',
+                ...(Object.hasOwn(form, 'defaultCode') ? { defaultCode: form.defaultCode || null } : {}),
+                ...(Object.hasOwn(form, 'barcode') ? { barcode: form.barcode || null } : {}),
             }, url, req);
             if (!result.ok) {
                 if (partial)
                     return json({ ok: false, message: _('product_backend.error.invalid'), errors: errorsOf(result) }, { status: 422 });
-                return seeOther(inLocale(url, `/admin/products/${params.id}?invalid=1&count=${errorsOf(result).length}`));
+                return seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1&count=${errorsOf(result).length}`));
             }
             if (hasStock) {
                 const stockResult = await configureStock(ctx, url, req, params.id, form);
@@ -662,7 +795,19 @@ export const routes = {
                             message: _('product_backend.error.invalid'),
                             errors: errorsOf(stockResult),
                         }, { status: 422 });
-                    return seeOther(inLocale(url, `/admin/products/${params.id}?invalid=1&count=${errorsOf(stockResult).length}`));
+                    return seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1&count=${errorsOf(stockResult).length}`));
+                }
+            }
+            if (hasProductTax && Object.hasOwn(form, 'taxId')) {
+                const taxResult = await ctx.call('account.setProductTax', { templateId: params.id, taxId: form.taxId || null }, url, req);
+                if (!taxResult.ok) {
+                    if (partial)
+                        return json({
+                            ok: false,
+                            message: _('product_backend.error.invalid'),
+                            errors: errorsOf(taxResult),
+                        }, { status: 422 });
+                    return seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1&count=${errorsOf(taxResult).length}`));
                 }
             }
             if (!partial)
@@ -674,22 +819,70 @@ export const routes = {
         const row = (await ctx.call('product.getTemplate', { id: params.id }, url, req));
         if (!row)
             return text('Product not found', { status: 404 });
-        const [mediaRows, variants, options, stockConfig] = await Promise.all([
+        const [mediaRows, listedVariants, options, stockConfig, attributeLines, currentTax] = await Promise.all([
             mediaFor(ctx, url, req, row.id),
             ctx.call('product.listVariants', { templateId: row.id }, url, req),
             optionsFor(ctx, url, req),
             hasStock
                 ? ctx.call('stock.getProductConfig', { templateId: row.id }, url, req)
                 : Promise.resolve(null),
+            ctx.call('product.listAttributeLines', { templateId: row.id }, url, req),
+            hasProductTax
+                ? ctx.call('account.getProductTax', { templateId: row.id }, url, req)
+                : Promise.resolve(null),
         ]);
-        const body = productDetailScreen(_, { ...row, ...stockConfig }, {
+        const defaultVariant = (row.variants ?? []).find((variant) => String(variant.combinationKey ?? '') === '');
+        const variants = listedVariants.filter((variant) => String(variant.combinationKey ?? '') !== '');
+        const variantPageCount = Math.max(1, Math.ceil(variants.length / VARIANT_PAGE_SIZE));
+        const variantPage = Math.min(requestedVariantPage(url), variantPageCount);
+        const variantStart = (variantPage - 1) * VARIANT_PAGE_SIZE;
+        const visibleVariants = variants.slice(variantStart, variantStart + VARIANT_PAGE_SIZE);
+        const stockByVariant = new Map();
+        if (activeTab === 'variants' && hasStock && live.functions['stock.forecast']) {
+            const forecasts = await Promise.all(visibleVariants.map(async (variant) => ({
+                id: variant.id,
+                forecast: (await ctx.call('stock.forecast', { productId: variant.id }, url, req)),
+            })));
+            for (const entry of forecasts)
+                stockByVariant.set(String(entry.id), String(entry.forecast.onHand ?? '0'));
+        }
+        const variantMediaPageCount = Math.max(1, Math.ceil(variants.length / MEDIA_VARIANT_PAGE_SIZE));
+        const variantMediaPage = Math.min(requestedVariantMediaPage(url), variantMediaPageCount);
+        const variantMediaStart = (variantMediaPage - 1) * MEDIA_VARIANT_PAGE_SIZE;
+        const visibleMediaVariants = activeTab === 'media'
+            ? variants.slice(variantMediaStart, variantMediaStart + MEDIA_VARIANT_PAGE_SIZE)
+            : variants;
+        const variantMediaRows = activeTab === 'media'
+            ? (await ctx.call('product_media.listMediaByProducts', { productIds: visibleMediaVariants.map((variant) => variant.id) }, url, req))
+            : [];
+        const variantMedia = visibleMediaVariants.map((variant) => ({
+            variantId: variant.id,
+            images: variantMediaRows
+                .filter((image) => image.productId === variant.id)
+                .map((image) => ({
+                id: image.id,
+                src: `/files/${image.attachmentId}`,
+                alt: image.alt || image.attachment?.name || variant.defaultCode || variant.name || variant.id,
+                primary: image.primary,
+                actions: {
+                    remove: inLocale(url, `/admin/product/templates/${row.id}/variants/${variant.id}/media/${image.id}/remove?tab=media`),
+                },
+            })),
+        }));
+        const body = productDetailScreen(_, {
+            ...row,
+            ...stockConfig,
+            defaultCode: defaultVariant?.defaultCode ?? null,
+            barcode: defaultVariant?.barcode ?? null,
+            taxId: currentTax?.taxId ?? null,
+        }, {
             status: 'ready',
-            uploadAction: inLocale(url, `/admin/products/${row.id}/media?tab=media`),
+            uploadAction: inLocale(url, `/admin/product/templates/${row.id}/media?tab=media`),
             uploadControl: savedPartial
                 ? ''
                 : await ctx.joint(url, req, 'product_backend:media.upload', {
                     identity: `template:${row.id}`,
-                    action: inLocale(url, `/admin/products/${row.id}/media?tab=media`),
+                    action: inLocale(url, `/admin/product/templates/${row.id}/media?tab=media`),
                     label: _('product_backend.media.add'),
                 }),
             images: mediaRows.map((image, index) => ({
@@ -698,16 +891,16 @@ export const routes = {
                 alt: image.alt || image.attachment?.name || row.name,
                 primary: image.primary,
                 actions: {
-                    primary: inLocale(url, `/admin/products/${row.id}/media/${image.id}/primary?tab=media`),
-                    remove: inLocale(url, `/admin/products/${row.id}/media/${image.id}/remove?tab=media`),
+                    primary: inLocale(url, `/admin/product/templates/${row.id}/media/${image.id}/primary?tab=media`),
+                    remove: inLocale(url, `/admin/product/templates/${row.id}/media/${image.id}/remove?tab=media`),
                     ...(index > 0
                         ? {
-                            moveUp: inLocale(url, `/admin/products/${row.id}/media/${image.id}/move-up?tab=media`),
+                            moveUp: inLocale(url, `/admin/product/templates/${row.id}/media/${image.id}/move-up?tab=media`),
                         }
                         : {}),
                     ...(index + 1 < mediaRows.length
                         ? {
-                            moveDown: inLocale(url, `/admin/products/${row.id}/media/${image.id}/move-down?tab=media`),
+                            moveDown: inLocale(url, `/admin/product/templates/${row.id}/media/${image.id}/move-down?tab=media`),
                         }
                         : {}),
                 },
@@ -719,9 +912,66 @@ export const routes = {
                 }),
         }, {
             ...options,
-            variants,
+            variants: (activeTab === 'media'
+                ? visibleMediaVariants
+                : activeTab === 'variants'
+                    ? visibleVariants
+                    : variants).map((variant) => ({
+                ...variant,
+                ...(stockByVariant.has(String(variant.id))
+                    ? { stock: stockByVariant.get(String(variant.id)) }
+                    : {}),
+            })),
+            variantPage: {
+                page: variantPage,
+                pageSize: VARIANT_PAGE_SIZE,
+                total: variants.length,
+            },
+            variantMedia,
+            variantMediaPage: {
+                page: variantMediaPage,
+                pageSize: MEDIA_VARIANT_PAGE_SIZE,
+                total: variants.length,
+            },
+            attributeLines: attributeLines.filter((line) => options.variantAttributes.some((attribute) => attribute.value === line.attributeId)),
             stockEnabled: hasStock,
             errors: invalidErrors(url, _),
+            actions: savedPartial
+                ? ''
+                : await ctx.joint(url, req, 'product_backend:template.actions', {
+                    templateId: row.id,
+                    locale: localeQuery(url),
+                }),
+            controls: {
+                uom: await uomControl(ctx, url, req, _, {
+                    id: `product-uom:${row.id}`,
+                    value: row.uomId,
+                    units: options.uoms,
+                }),
+                category: await categoryControl(ctx, url, req, _, {
+                    id: `product-category:${row.id}`,
+                    value: row.categoryId,
+                    categories: options.categories,
+                }),
+                brand: await brandControl(ctx, url, req, _, {
+                    id: `product-brand:${row.id}`,
+                    value: row.brandId,
+                    brands: options.brands,
+                }),
+                attribute: await attributeControl(ctx, url, req, _, {
+                    id: `product-attribute:${row.id}`,
+                    attributes: options.variantAttributes,
+                    required: true,
+                }),
+                // The value picker cannot be scoped to an attribute yet — the two are
+                // separate fields and the attribute is only known once chosen — so it
+                // lists every value, each labelled with the attribute it belongs to.
+                attributeValues: await attributeValuesControl(ctx, url, req, _, {
+                    id: `product-attribute-values:${row.id}`,
+                    choices: options.attributeValues,
+                    required: true,
+                }),
+            },
             editor: savedPartial
                 ? ''
                 : await ctx.joint(url, req, 'product_backend:template.editor', {
@@ -735,7 +985,7 @@ export const routes = {
                 resModel: 'product.Template',
                 resId: row.id,
                 lang,
-            }), savedPartial ? {} : await frameFor(ctx, url, req), localeSuffix(url), activeTab, savedPartial);
+            }), savedPartial ? {} : await frameOf(ctx, url, req), localeQuery(url), activeTab, savedPartial);
         if (savedPartial)
             return withHeaders(fragment(body, { type: NAVIGATION_TYPE }), { vary: 'X-Ket-Partial' });
         return backendPage(ctx, req, {
@@ -744,17 +994,19 @@ export const routes = {
             body,
         });
     },
-    '/admin/products/{id}/variants/generate': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/variants/generate': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         const result = await ctx.call('product.generateVariants', { templateId: params.id }, url, req);
         return result.ok
             ? seeProduct(params.id, url)
-            : seeOther(inLocale(url, `/admin/products/${params.id}?invalid=1`));
+            : seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1`));
     },
-    '/admin/products/{id}/attribute-lines': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/attribute-lines': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         const form = await readForm(req);
         const attributeId = form.attributeId ?? '';
         const result = await ctx.call('product.saveAttributeLine', {
@@ -768,9 +1020,29 @@ export const routes = {
         }, url, req);
         return result.ok
             ? seeProduct(params.id, url)
-            : seeOther(inLocale(url, `/admin/products/${params.id}?invalid=1`));
+            : seeOther(inLocale(url, `/admin/product/templates/${params.id}?invalid=1`));
     },
-    '/admin/products/{id}/variants/{variantId}': (ctx) => async (url, req, params) => {
+    '/admin/product/templates/{id}/archive': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
+        const form = await readForm(req);
+        await ctx.call('product.archiveTemplate', { id: params.id, active: form.active === '1' }, url, req);
+        return seeProduct(params.id, url);
+    },
+    '/admin/product/templates/{id}/attribute-lines/{lineId}/remove': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
+        // The line has to belong to the template in the path, or a POST could take
+        // an attribute off a product the reader never opened.
+        const lines = (await ctx.call('product.listAttributeLines', { templateId: params.id }, url, req));
+        if (!lines.some((line) => line.id === params.lineId))
+            return text('Attribute line not found', { status: 404 });
+        await ctx.call('product.removeAttributeLine', { id: params.lineId }, url, req);
+        return seeProduct(params.id, url);
+    },
+    '/admin/product/templates/{id}/variants/{variantId}': (ctx) => async (url, req, params) => {
         const lang = ctx.localeOf(url, req);
         const _ = ctx.translate(lang);
         const activeTab = variantTabOf(url);
@@ -779,6 +1051,8 @@ export const routes = {
             return text('Variant not found', { status: 404 });
         let savedPartial = false;
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const partial = isProductPartial(req, 'product-variant');
             const form = await readForm(req);
             const saved = await ctx.call('product.saveVariant', {
@@ -792,16 +1066,24 @@ export const routes = {
             if (!saved.ok) {
                 if (partial)
                     return json({ ok: false, message: _('product_backend.error.invalid'), errors: errorsOf(saved) }, { status: 422 });
-                return seeOther(inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}?invalid=1`));
+                return seeOther(inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}?invalid=1`));
             }
             const cost = await ctx.call('product.setCost', { productId: params.variantId, standardPrice: form.standardPrice || '0' }, url, req);
             if (!cost.ok) {
                 if (partial)
                     return json({ ok: false, message: _('product_backend.error.invalid'), errors: errorsOf(cost) }, { status: 422 });
-                return seeOther(inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}?invalid=1`));
+                return seeOther(inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}?invalid=1`));
             }
-            if (form.uomId) {
-                const productUom = await ctx.call('product.addProductUom', { productId: params.variantId, uomId: form.uomId, barcode: form.uomBarcode || null }, url, req);
+            {
+                // The form's unit is a single select, so the submission replaces what
+                // the variant has rather than adding to it — and an empty selection
+                // clears it. Adding would leave the previous unit in place, and the
+                // form would go on showing it.
+                const productUom = await ctx.call('product.setProductUom', {
+                    productId: params.variantId,
+                    uomId: form.uomId || null,
+                    barcode: form.uomBarcode || null,
+                }, url, req);
                 if (!productUom.ok) {
                     if (partial)
                         return json({
@@ -809,7 +1091,7 @@ export const routes = {
                             message: _('product_backend.error.invalid'),
                             errors: errorsOf(productUom),
                         }, { status: 422 });
-                    return seeOther(inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}?invalid=1`));
+                    return seeOther(inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}?invalid=1`));
                 }
             }
             if (!partial)
@@ -826,32 +1108,48 @@ export const routes = {
         ]);
         if (!current || current.templateId !== params.id || !template)
             return text('Variant not found', { status: 404 });
+        // Both the picker and the plain select behind it are held to the template's
+        // unit tree, so a unit that `setProductUom` would refuse is never offered.
+        const unitRoot = unitRootOf(options.unitRows, template.uomId);
+        const treeUnits = unitRoot
+            ? options.uoms.filter((unit) => unitRootOf(options.unitRows, unit.value) === unitRoot)
+            : options.uoms;
+        const variantUom = await uomControl(ctx, url, req, _, {
+            id: `variant-uom:${params.variantId}`,
+            value: Array.isArray(current.uoms)
+                ? current.uoms[0]?.uomId
+                : undefined,
+            units: treeUnits,
+            rootId: unitRoot,
+        });
         const body = variantScreen(_, params.id, current, {
             status: 'ready',
-            uploadAction: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media?tab=media`),
+            uploadAction: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media?tab=media`),
             uploadControl: savedPartial
                 ? ''
                 : await ctx.joint(url, req, 'product_backend:media.upload', {
                     identity: `variant:${params.variantId}`,
-                    action: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media?tab=media`),
+                    action: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media?tab=media`),
                     label: _('product_backend.media.add'),
                 }),
             images: mediaRows.map((image, index) => ({
                 id: image.id,
                 src: `/files/${image.attachmentId}`,
-                alt: image.alt || image.attachment?.name || String(current.defaultCode || current.id),
+                alt: image.alt ||
+                    image.attachment?.name ||
+                    String(current.name || current.defaultCode || current.id),
                 primary: image.primary,
                 actions: {
-                    primary: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media/${image.id}/primary?tab=media`),
-                    remove: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media/${image.id}/remove?tab=media`),
+                    primary: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media/${image.id}/primary?tab=media`),
+                    remove: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media/${image.id}/remove?tab=media`),
                     ...(index > 0
                         ? {
-                            moveUp: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media/${image.id}/move-up?tab=media`),
+                            moveUp: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media/${image.id}/move-up?tab=media`),
                         }
                         : {}),
                     ...(index + 1 < mediaRows.length
                         ? {
-                            moveDown: inLocale(url, `/admin/products/${params.id}/variants/${params.variantId}/media/${image.id}/move-down?tab=media`),
+                            moveDown: inLocale(url, `/admin/product/templates/${params.id}/variants/${params.variantId}/media/${image.id}/move-down?tab=media`),
                         }
                         : {}),
                 },
@@ -861,30 +1159,31 @@ export const routes = {
                 : await ctx.joint(url, req, 'product_backend:variant.media', {
                     productId: params.variantId,
                 }),
-        }, options.uoms, template, savedPartial
+        }, treeUnits, template, savedPartial
             ? ''
             : await ctx.joint(url, req, 'product_backend:variant.collaboration', {
                 resModel: 'product.Product',
                 resId: params.variantId,
                 lang,
-            }), savedPartial ? {} : await frameFor(ctx, url, req), invalidErrors(url, _), localeSuffix(url), savedPartial
+            }), savedPartial ? {} : await frameOf(ctx, url, req), invalidErrors(url, _), localeQuery(url), savedPartial
             ? ''
             : await ctx.joint(url, req, 'product_backend:variant.editor', {
                 identity: `variant:${params.variantId}`,
                 productId: params.variantId,
                 lang,
-            }), activeTab, savedPartial);
+            }), activeTab, savedPartial, variantUom);
         if (savedPartial)
             return withHeaders(fragment(body, { type: NAVIGATION_TYPE }), { vary: 'X-Ket-Partial' });
         return backendPage(ctx, req, {
             lang,
-            title: String(current.defaultCode || current.id),
+            title: String(current.name || current.defaultCode || current.id),
             body,
         });
     },
-    '/admin/products/{id}/variants/{variantId}/media': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST multipart/form-data', { status: 405 });
+    '/admin/product/templates/{id}/variants/{variantId}/media': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req, 'POST multipart/form-data');
+        if (denied)
+            return denied;
         const variant = (await ctx.call('product.getVariant', { id: params.variantId }, url, req));
         if (!variant || variant.templateId !== params.id)
             return text('Variant not found', { status: 404 });
@@ -908,27 +1207,30 @@ export const routes = {
         }
         return seeVariant(params.id, params.variantId, url);
     },
-    '/admin/products/{id}/variants/{variantId}/media/{mediaId}/primary': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/variants/{variantId}/media/{mediaId}/primary': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         if (!(await ownsVariantMedia(ctx, url, req, params.variantId, params.mediaId)))
             return text('Media not found', { status: 404 });
         await ctx.call('product_media.setPrimary', { id: params.mediaId }, url, req);
         return seeVariant(params.id, params.variantId, url);
     },
-    '/admin/products/{id}/variants/{variantId}/media/{mediaId}/remove': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/variants/{variantId}/media/{mediaId}/remove': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         if (!(await ownsVariantMedia(ctx, url, req, params.variantId, params.mediaId)))
             return text('Media not found', { status: 404 });
         await ctx.call('product_media.removeMedia', { id: params.mediaId }, url, req);
         return seeVariant(params.id, params.variantId, url);
     },
-    '/admin/products/{id}/variants/{variantId}/media/{mediaId}/move-up': (ctx) => async (url, req, params) => moveVariant(ctx, url, req, params.id, params.variantId, params.mediaId, -1),
-    '/admin/products/{id}/variants/{variantId}/media/{mediaId}/move-down': (ctx) => async (url, req, params) => moveVariant(ctx, url, req, params.id, params.variantId, params.mediaId, 1),
-    '/admin/products/{id}/media': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST multipart/form-data', { status: 405 });
+    '/admin/product/templates/{id}/variants/{variantId}/media/{mediaId}/move-up': (ctx) => async (url, req, params) => moveVariant(ctx, url, req, params.id, params.variantId, params.mediaId, -1),
+    '/admin/product/templates/{id}/variants/{variantId}/media/{mediaId}/move-down': (ctx) => async (url, req, params) => moveVariant(ctx, url, req, params.id, params.variantId, params.mediaId, 1),
+    '/admin/product/templates/{id}/media': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req, 'POST multipart/form-data');
+        if (denied)
+            return denied;
         const template = await ctx.call('product.getTemplate', { id: params.id }, url, req);
         if (!template)
             return text('Product not found', { status: 404 });
@@ -952,28 +1254,31 @@ export const routes = {
         }
         return seeProduct(params.id, url);
     },
-    '/admin/products/{id}/media/{mediaId}/primary': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/media/{mediaId}/primary': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         if (!(await ownsMedia(ctx, url, req, params.id, params.mediaId)))
             return text('Media not found', { status: 404 });
         await ctx.call('product_media.setPrimary', { id: params.mediaId }, url, req);
         return seeProduct(params.id, url);
     },
-    '/admin/products/{id}/media/{mediaId}/remove': (ctx) => async (url, req, params) => {
-        if (req.method !== 'POST')
-            return text('POST', { status: 405 });
+    '/admin/product/templates/{id}/media/{mediaId}/remove': (ctx) => async (url, req, params) => {
+        const denied = refusePost(req);
+        if (denied)
+            return denied;
         if (!(await ownsMedia(ctx, url, req, params.id, params.mediaId)))
             return text('Media not found', { status: 404 });
         await ctx.call('product_media.removeMedia', { id: params.mediaId }, url, req);
         return seeProduct(params.id, url);
     },
-    '/admin/products/{id}/media/{mediaId}/move-up': (ctx) => async (url, req, params) => move(ctx, url, req, params.id, params.mediaId, -1),
-    '/admin/products/{id}/media/{mediaId}/move-down': (ctx) => async (url, req, params) => move(ctx, url, req, params.id, params.mediaId, 1),
+    '/admin/product/templates/{id}/media/{mediaId}/move-up': (ctx) => async (url, req, params) => move(ctx, url, req, params.id, params.mediaId, -1),
+    '/admin/product/templates/{id}/media/{mediaId}/move-down': (ctx) => async (url, req, params) => move(ctx, url, req, params.id, params.mediaId, 1),
 };
 const move = async (ctx, url, req, templateId, mediaId, delta) => {
-    if (req.method !== 'POST')
-        return text('POST', { status: 405 });
+    const denied = refusePost(req);
+    if (denied)
+        return denied;
     const rows = await mediaFor(ctx, url, req, templateId);
     const index = rows.findIndex((row) => row.id === mediaId);
     if (index < 0)
@@ -987,8 +1292,9 @@ const move = async (ctx, url, req, templateId, mediaId, delta) => {
     return seeProduct(templateId, url);
 };
 const moveVariant = async (ctx, url, req, templateId, productId, mediaId, delta) => {
-    if (req.method !== 'POST')
-        return text('POST', { status: 405 });
+    const denied = refusePost(req);
+    if (denied)
+        return denied;
     const rows = await variantMediaFor(ctx, url, req, productId);
     const index = rows.findIndex((row) => row.id === mediaId);
     if (index < 0)