@ketvietlab/ketsuite 0.1.2 → 0.1.3

package/dist/modules/purchase_backend/index.js

@@ -1,41 +1,103 @@
 import { randomUUID } from 'node:crypto';
 import { defineModule, text } from '@ketvietlab/ketjs';
-import { backendPage } from '../../ui/index.js';
 import { readForm, seeOther } from '../backend/forms.js';
-import { viewerOf } from '../backend/routes.js';
 import { partnerRelationControl } from '../partner_backend/relation-control.js';
+import { accountOptions, accountRelationControl } from '../account_backend/relation-control.js';
+import { templateRelationControl, variantRelationControl } from '../product_backend/relation-control.js';
 import { PURCHASE_METHODS } from '../purchase/functions.js';
-import { dashboard, labelOf, orderDetail, ordersScreen, supplierInfoScreen } from './screens.js';
-const frame = 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'),
-    },
-});
-const document = async (ctx, url, req, title, body) => {
-    const lang = ctx.localeOf(url, req), _ = ctx.translate(lang);
-    return backendPage(ctx, req, {
-        lang,
-        title: _(title),
-        body: await body(_, await frame(ctx, url, req)),
-    });
+import { labelOf, purchaseOrderDetailScreen, purchaseOrdersListScreen, purchaseOverviewScreen, rfqCreateScreen, rfqsListScreen, vendorPricelistCreateScreen, vendorPricelistsListScreen, } from './screens/index.js';
+import { adminPage, choices, inLocale, localeQuery, optional, printGroup } from '../backend/screen.js';
+import { PAGE_SIZE, pageOf, pager, searchOf, withParam } from '../backend/paging.js';
+const crossSite = (req) => {
+    const origin = req.headers.origin;
+    if (!origin)
+        return false;
+    try {
+        return new URL(origin).host !== String(req.headers.host ?? '');
+    }
+    catch {
+        return true;
+    }
 };
-const redirect = (result, ok) => result.ok ? seeOther(ok) : seeOther(`${ok}${ok.includes('?') ? '&' : '?'}invalid=1`);
-const optional = (form, name) => (form[name] ? { [name]: form[name] } : {});
-const localeSuffix = (url) => {
-    const lang = url.searchParams.get('lang');
-    return lang ? `?lang=${encodeURIComponent(lang)}` : '';
+/**
+ * Carry the first rejected field back to the screen. The old redirect set
+ * `invalid=1`, which nothing read, so every refused action — a missing vendor, a
+ * unit that does not fit the product, a bill with nothing left to bill — landed
+ * on an unchanged page with no message at all.
+ */
+const redirect = (result, ok, rejected = ok) => {
+    const held = result;
+    if (held.ok)
+        return seeOther(ok);
+    const field = held.errors?.[0]?.field;
+    const query = `invalid=${encodeURIComponent(field ?? '1')}`;
+    return seeOther(`${rejected}${rejected.includes('?') ? '&' : '?'}${query}`);
 };
-const choices = (rows, empty = false) => [
-    ...(empty ? [{ value: '', label: '—' }] : []),
-    ...rows.map((row) => ({
-        value: String(row.id),
-        label: `${String(row.code ?? '')}${row.code ? ' · ' : ''}${String(row.name)}`,
-    })),
-];
+const createPurchaseOrder = async (ctx, url, req, form) => ctx.call('purchase.createOrder', {
+    id: randomUUID(),
+    partnerId: form.partnerId ?? '',
+    partnerRef: form.partnerRef ?? '',
+    pickingTypeId: form.pickingTypeId ?? '',
+    ...optional(form, 'dateOrder'),
+    ...optional(form, 'datePlanned'),
+    ...optional(form, 'notes'),
+}, url, req);
+const safeRfqReturnTo = (url) => {
+    const fallback = inLocale(url, '/admin/purchase/rfqs');
+    const raw = url.searchParams.get('returnTo');
+    if (!raw)
+        return fallback;
+    const candidate = new URL(raw, 'http://ket.local');
+    return candidate.origin === 'http://ket.local' && candidate.pathname === '/admin/purchase/rfqs'
+        ? `${candidate.pathname}${candidate.search}`
+        : fallback;
+};
+const rfqCreatePath = (url, returnTo) => {
+    const target = new URL(inLocale(url, '/admin/purchase/rfqs/new'), 'http://ket.local');
+    target.searchParams.set('returnTo', returnTo);
+    return `${target.pathname}${target.search}`;
+};
+const listKeep = (url, omitted = []) => {
+    const keep = {};
+    for (const [key, value] of url.searchParams)
+        if (!['q', 'page', ...omitted].includes(key))
+            keep[key] = value;
+    return keep;
+};
+const listGroups = (_, url, rows, group) => {
+    if (group !== 'state' && group !== 'vendor')
+        return undefined;
+    const grouped = new Map();
+    for (const row of rows) {
+        const key = group === 'state' ? String(row.state) : String(row.partnerName ?? row.partnerId);
+        grouped.set(key, [...(grouped.get(key) ?? []), row]);
+    }
+    return [...grouped.entries()].map(([key, groupedRows]) => ({
+        id: `${group}:${key}`,
+        label: group === 'state' ? labelOf(_, 'state', key) : key,
+        count: groupedRows.length,
+        depth: 0,
+        open: true,
+        href: withParam(url, 'group', null),
+        rows: groupedRows,
+    }));
+};
+const saveSupplierInfo = async (ctx, url, req, form) => ctx.call('purchase.saveSupplierInfo', {
+    id: randomUUID(),
+    partnerId: form.partnerId ?? '',
+    productTemplateId: form.productTemplateId ?? '',
+    ...optional(form, 'productId'),
+    productUomId: form.productUomId ?? '',
+    minQty: form.minQty || '0',
+    price: form.price || '0',
+    discount: form.discount || '0',
+    delay: Number(form.delay || 1),
+    sequence: Number(form.sequence || 1),
+    ...optional(form, 'productName'),
+    ...optional(form, 'productCode'),
+    ...optional(form, 'dateStart'),
+    ...optional(form, 'dateEnd'),
+}, url, req);
 const common = async (ctx, url, req) => {
     const [partners, companies, templates, units, pickingTypes, taxes, journals, accounts] = await Promise.all([
         ctx.call('partner.listPartners', {}, url, req),
@@ -79,7 +141,11 @@ const orderFields = async (ctx, url, req, _, data) => [
         options: choices(data.partners),
         required: true,
     },
-    { name: 'partnerRef', label: _('purchase_backend.field.partnerRef'), required: true },
+    {
+        name: 'partnerRef',
+        label: _('purchase_backend.field.partnerRef'),
+        help: _('purchase_backend.field.partnerRefHint'),
+    },
     {
         name: 'pickingTypeId',
         label: _('purchase_backend.field.pickingType'),
@@ -94,6 +160,8 @@ const orderFields = async (ctx, url, req, _, data) => [
 const detailHandler = (ctx) => async (url, req, params) => {
     const path = `${url.pathname}${url.search}`;
     if (req.method === 'POST') {
+        if (crossSite(req))
+            return text('Forbidden', { status: 403 });
         const form = await readForm(req);
         let result;
         if (form.action === 'add-line')
@@ -108,6 +176,16 @@ const detailHandler = (ctx) => async (url, req, params) => {
                 ...optional(form, 'taxId'),
                 ...optional(form, 'datePlanned'),
             }, url, req);
+        else if (form.action === 'update-line')
+            result = await ctx.call('purchase.updateLine', {
+                id: form.lineId ?? '',
+                productQty: form.productQty || '0',
+                ...optional(form, 'priceUnit'),
+                ...optional(form, 'discount'),
+                ...optional(form, 'taxId'),
+            }, url, req);
+        else if (form.action === 'remove-line')
+            result = await ctx.call('purchase.removeLine', { id: form.lineId ?? '' }, url, req);
         else if (form.action === 'send')
             result = await ctx.call('purchase.sendRfq', { id: params.id }, url, req);
         else if (form.action === 'confirm')
@@ -116,6 +194,8 @@ const detailHandler = (ctx) => async (url, req, params) => {
             result = await ctx.call('purchase.confirmOrder', { id: params.id, requiresApproval: true }, url, req);
         else if (form.action === 'approve')
             result = await ctx.call('purchase.approveOrder', { id: params.id }, url, req);
+        else if (form.action === 'reset')
+            result = await ctx.call('purchase.resetToDraft', { id: params.id }, url, req);
         else if (form.action === 'sync')
             result = await ctx.call('purchase.syncReceipts', { id: params.id }, url, req);
         else if (form.action === 'lock' || form.action === 'unlock')
@@ -159,6 +239,13 @@ const detailHandler = (ctx) => async (url, req, params) => {
             type: 'select',
             options: variants,
             required: true,
+            control: await variantRelationControl(ctx, url, req, _, {
+                id: 'purchase-line-product',
+                name: 'productId',
+                label: _('purchase_backend.field.product'),
+                variants,
+                required: true,
+            }),
         },
         {
             name: 'productQty',
@@ -205,6 +292,14 @@ const detailHandler = (ctx) => async (url, req, params) => {
             type: 'select',
             options: choices(expenses),
             required: true,
+            control: await accountRelationControl(ctx, url, req, _, {
+                id: 'purchase-expense-account',
+                name: 'expenseAccountId',
+                label: _('purchase_backend.field.expenseAccount'),
+                accounts: accountOptions(expenses),
+                accountTypes: ['expense*'],
+                required: true,
+            }),
         },
         {
             name: 'payableAccountId',
@@ -212,22 +307,48 @@ const detailHandler = (ctx) => async (url, req, params) => {
             type: 'select',
             options: choices(payable),
             required: true,
+            control: await accountRelationControl(ctx, url, req, _, {
+                id: 'purchase-payable-account',
+                name: 'payableAccountId',
+                label: _('purchase_backend.field.payableAccount'),
+                accounts: accountOptions(payable),
+                accountTypes: ['liability_payable'],
+                required: true,
+            }),
         },
         {
             name: 'taxAccountId',
             label: _('purchase_backend.field.taxAccount'),
             type: 'select',
             options: choices(data.accounts, true),
+            control: await accountRelationControl(ctx, url, req, _, {
+                id: 'purchase-tax-account',
+                name: 'taxAccountId',
+                label: _('purchase_backend.field.taxAccount'),
+                accounts: accountOptions(data.accounts),
+                allowEmpty: true,
+            }),
         },
         { name: 'invoiceDate', label: _('purchase_backend.field.invoiceDate'), type: 'date' },
     ];
-    return document(ctx, url, req, 'purchase_backend.detail.title', (_, shell) => orderDetail(_, {
-        frame: shell,
-        order: { ...order, partnerName: vendor?.name },
-        actionPath: path,
-        lineFields,
-        billFields,
-    }));
+    const reportId = ['draft', 'sent', 'to approve'].includes(String(order.state))
+        ? 'purchase.rfq'
+        : ['purchase', 'done'].includes(String(order.state))
+            ? 'purchase.purchaseOrder'
+            : null;
+    const printable = (await ctx.reportsOf(url, req, 'purchase.Order')).filter((report) => report.id === reportId);
+    return adminPage(ctx, url, req, {
+        title: 'purchase_backend.detail.title',
+        body: (_, shell) => purchaseOrderDetailScreen(_, {
+            frame: shell,
+            order: { ...order, partnerName: vendor?.name },
+            actionPath: path,
+            lineFields,
+            billFields,
+            printActions: printGroup(_, printable, String(order.id), url.search),
+            invalid: url.searchParams.get('invalid'),
+        }),
+    });
 };
 const vi = {
     'app.title': 'Mua hàng trong quản trị',
@@ -275,6 +396,35 @@ const vi = {
     'field.vendor': 'Nhà cung cấp',
     'relation.vendors': 'Quản lý nhà cung cấp',
     'field.partnerRef': 'Tham chiếu nhà cung cấp',
+    'field.partnerRefHint': 'Số báo giá của nhà cung cấp; điền khi họ phản hồi.',
+    'feedback.rejected': 'Chưa lưu được',
+    'feedback.rejectedHint': 'Kiểm tra lại các trường bắt buộc rồi gửi lại.',
+    'feedback.rejectedField': 'Trường "{field}" chưa hợp lệ.',
+    'setup.title': 'Cần cấu hình trước khi mua hàng',
+    'setup.hint': 'Chưa có: {missing}. Tạo xong mới lập được yêu cầu báo giá.',
+    'setup.vendors': 'nhà cung cấp',
+    'setup.pickingTypes': 'loại phiếu nhập kho',
+    'setup.openInventory': 'Mở cấu hình kho',
+    'setup.openPartners': 'Mở danh bạ đối tác',
+    'action.updateLine': 'Lưu dòng',
+    'action.removeLine': 'Xoá dòng',
+    'lines.edit': 'Sửa',
+    'lines.empty': 'Yêu cầu chưa có dòng nào.',
+    'lines.emptyHint': 'Thêm ít nhất một sản phẩm bên dưới trước khi xác nhận.',
+    'orders.empty': 'Chưa có đơn mua nào.',
+    'orders.emptyHint': 'Đơn mua sinh ra khi một yêu cầu báo giá được xác nhận.',
+    'orders.openRequests': 'Mở yêu cầu báo giá',
+    'action.resetToDraft': 'Trả về nháp',
+    'moveState.draft': 'Nháp',
+    'moveState.waiting': 'Chờ',
+    'moveState.confirmed': 'Đã xác nhận',
+    'moveState.partially_available': 'Có một phần',
+    'moveState.assigned': 'Sẵn sàng',
+    'moveState.done': 'Hoàn tất',
+    'moveState.cancel': 'Đã hủy',
+    'billState.draft': 'Nháp',
+    'billState.posted': 'Đã ghi sổ',
+    'billState.cancel': 'Đã hủy',
     'field.state': 'Trạng thái',
     'field.dateOrder': 'Ngày đặt hàng',
     'field.datePlanned': 'Ngày dự kiến nhận',
@@ -364,6 +514,35 @@ const en = {
     'field.vendor': 'Vendor',
     'relation.vendors': 'Manage vendors',
     'field.partnerRef': 'Vendor Reference',
+    'field.partnerRefHint': "The vendor's own quotation number; fill it in when they reply.",
+    'feedback.rejected': 'Not saved',
+    'feedback.rejectedHint': 'Check the required fields and submit again.',
+    'feedback.rejectedField': 'The "{field}" field is not valid.',
+    'setup.title': 'Purchasing needs configuring first',
+    'setup.hint': 'Still missing: {missing}. A request for quotation needs these to exist.',
+    'setup.vendors': 'vendors',
+    'setup.pickingTypes': 'receipt operation types',
+    'setup.openInventory': 'Open inventory setup',
+    'setup.openPartners': 'Open partner directory',
+    'action.updateLine': 'Save line',
+    'action.removeLine': 'Remove line',
+    'lines.edit': 'Edit',
+    'lines.empty': 'This request has no lines yet.',
+    'lines.emptyHint': 'Add at least one product below before confirming it.',
+    'orders.empty': 'No purchase orders yet.',
+    'orders.emptyHint': 'A purchase order appears once a request for quotation is confirmed.',
+    'orders.openRequests': 'Open requests for quotation',
+    'action.resetToDraft': 'Reset to draft',
+    'moveState.draft': 'Draft',
+    'moveState.waiting': 'Waiting',
+    'moveState.confirmed': 'Confirmed',
+    'moveState.partially_available': 'Partially available',
+    'moveState.assigned': 'Ready',
+    'moveState.done': 'Done',
+    'moveState.cancel': 'Cancelled',
+    'billState.draft': 'Draft',
+    'billState.posted': 'Posted',
+    'billState.cancel': 'Cancelled',
     'field.state': 'Status',
     'field.dateOrder': 'Order Deadline',
     'field.datePlanned': 'Expected Arrival',
@@ -411,13 +590,11 @@ export default defineModule({
     name: 'purchase_backend',
     version: '0.1.0',
     depends: ['purchase', 'backend', 'partner_backend'],
-    install: 'auto',
-    app: true,
     title: 'Mua hàng trong quản trị',
     summary: 'RFQ, đơn mua, nhập hàng và hoá đơn nhà cung cấp.',
     category: 'Hệ thống',
     menus: {
-        purchase: { label: 'menu.app', icon: 'shopping-cart', sequence: 25 },
+        purchase: { label: 'menu.app', icon: 'shopping-cart', sequence: 24 },
         'purchase.dashboard': {
             parent: 'purchase',
             label: 'menu.dashboard',
@@ -431,12 +608,14 @@ export default defineModule({
             label: 'menu.rfqs',
             path: '/admin/purchase/rfqs',
             needs: 'purchase.listOrders',
+            sequence: 10,
         },
         'purchase.orders': {
             parent: 'purchase.ordersGroup',
             label: 'menu.orders',
             path: '/admin/purchase/orders',
             needs: 'purchase.listOrders',
+            sequence: 20,
         },
         'purchase.products': { parent: 'purchase', label: 'menu.products', sequence: 20 },
         'purchase.vendorPricelists': {
@@ -444,84 +623,244 @@ export default defineModule({
             label: 'menu.vendorPricelists',
             path: '/admin/purchase/vendor-pricelists',
             needs: 'purchase.listSupplierInfo',
+            sequence: 10,
         },
     },
     routes: {
         '/admin/purchase': (ctx) => async (url, req) => req.method === 'GET'
-            ? document(ctx, url, req, 'purchase_backend.dashboard.title', async (_, shell) => dashboard(_, (await ctx.call('purchase.listOrders', {}, url, req)), shell, localeSuffix(url)))
+            ? adminPage(ctx, url, req, {
+                title: 'purchase_backend.dashboard.title',
+                body: async (_, shell) => {
+                    const [orders, data] = await Promise.all([
+                        ctx.call('purchase.listOrders', {}, url, req),
+                        common(ctx, url, req),
+                    ]);
+                    return purchaseOverviewScreen(_, orders, shell, localeQuery(url), {
+                        pickingTypes: data.pickingTypes.length,
+                        vendors: data.partners.length,
+                    });
+                },
+            })
             : text('GET', { status: 405 }),
         '/admin/purchase/rfqs': (ctx) => async (url, req) => {
-            const rfqPath = `/admin/purchase/rfqs${localeSuffix(url)}`;
+            const returnTo = `${url.pathname}${url.search}`;
+            const createPath = rfqCreatePath(url, returnTo);
             if (req.method === 'POST') {
+                if (crossSite(req))
+                    return text('Forbidden', { status: 403 });
                 const form = await readForm(req);
-                const result = await ctx.call('purchase.createOrder', {
-                    id: randomUUID(),
-                    partnerId: form.partnerId ?? '',
-                    partnerRef: form.partnerRef ?? '',
-                    pickingTypeId: form.pickingTypeId ?? '',
-                    ...optional(form, 'dateOrder'),
-                    ...optional(form, 'datePlanned'),
-                    ...optional(form, 'notes'),
-                }, url, req);
-                return redirect(result, rfqPath);
+                return redirect(await createPurchaseOrder(ctx, url, req, form), returnTo, createPath);
             }
             if (req.method !== 'GET')
                 return text('GET or POST', { status: 405 });
+            const page = pageOf(url);
+            const search = searchOf(url);
+            const requestedState = url.searchParams.get('state');
+            const state = ['draft', 'sent', 'to approve'].includes(String(requestedState)) ? requestedState : null;
+            const requestedGroup = url.searchParams.get('group');
+            const group = requestedGroup === 'state' || requestedGroup === 'vendor' ? requestedGroup : null;
             const [orders, data] = await Promise.all([
-                ctx.call('purchase.listOrders', {}, url, req),
+                ctx.call('purchase.listOrders', {
+                    states: ['draft', 'sent', 'to approve'],
+                    ...(search ? { search } : {}),
+                    limit: 2_000,
+                }, url, req),
                 common(ctx, url, req),
             ]);
-            const state = url.searchParams.get('state');
             const vendors = new Map(data.partners.map((row) => [String(row.id), row.name]));
-            const rows = orders
+            const matching = orders
                 .filter((row) => ['draft', 'sent', 'to approve'].includes(String(row.state)) && (!state || row.state === state))
                 .map((row) => ({ ...row, partnerName: vendors.get(String(row.partnerId)) }));
-            return document(ctx, url, req, 'purchase_backend.rfqs.title', async (_, shell) => ordersScreen(_, {
-                title: _('purchase_backend.rfqs.title'),
-                frame: shell,
-                rows,
-                createFields: await orderFields(ctx, url, req, _, data),
-                createAction: rfqPath,
-            }));
+            const rows = group ? matching : matching.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+            return adminPage(ctx, url, req, {
+                title: 'purchase_backend.rfqs.title',
+                body: (_, shell) => rfqsListScreen(_, {
+                    frame: {
+                        ...shell,
+                        chrome: {
+                            search: {
+                                name: 'q',
+                                value: search ?? '',
+                                placeholder: _('purchase_backend.rfqs.title'),
+                                keep: listKeep(url),
+                                facets: [
+                                    ...(state
+                                        ? [
+                                            {
+                                                label: labelOf(_, 'state', state),
+                                                without: withParam(url, 'state', null),
+                                            },
+                                        ]
+                                        : []),
+                                    ...(group
+                                        ? [
+                                            {
+                                                label: `${_('backend.chrome.groupBy')}: ${group === 'state' ? _('purchase_backend.field.state') : _('purchase_backend.field.vendor')}`,
+                                                without: withParam(url, 'group', null),
+                                            },
+                                        ]
+                                        : []),
+                                ],
+                                menus: [
+                                    {
+                                        id: 'filters',
+                                        label: _('backend.chrome.filters'),
+                                        items: ['draft', 'sent', 'to approve'].map((value) => ({
+                                            id: `state:${value}`,
+                                            label: labelOf(_, 'state', value),
+                                            path: withParam(url, 'state', state === value ? null : value),
+                                            active: state === value,
+                                        })),
+                                    },
+                                    {
+                                        id: 'group',
+                                        label: _('backend.chrome.groupBy'),
+                                        items: [
+                                            {
+                                                id: 'group:state',
+                                                label: _('purchase_backend.field.state'),
+                                                path: withParam(url, 'group', group === 'state' ? null : 'state'),
+                                                active: group === 'state',
+                                            },
+                                            {
+                                                id: 'group:vendor',
+                                                label: _('purchase_backend.field.vendor'),
+                                                path: withParam(url, 'group', group === 'vendor' ? null : 'vendor'),
+                                                active: group === 'vendor',
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                            pager: group ? null : pager(url, page, rows.length, matching.length),
+                        },
+                    },
+                    rows,
+                    total: matching.length,
+                    createHref: createPath,
+                    detailSuffix: localeQuery(url),
+                    setup: { pickingTypes: data.pickingTypes.length, vendors: data.partners.length },
+                    table: { groups: listGroups(_, url, matching, group) },
+                }),
+            });
+        },
+        '/admin/purchase/rfqs/new': (ctx) => async (url, req) => {
+            const returnTo = safeRfqReturnTo(url);
+            const createPath = rfqCreatePath(url, returnTo);
+            if (req.method === 'POST') {
+                if (crossSite(req))
+                    return text('Forbidden', { status: 403 });
+                const form = await readForm(req);
+                return redirect(await createPurchaseOrder(ctx, url, req, form), returnTo, createPath);
+            }
+            if (req.method !== 'GET')
+                return text('GET or POST', { status: 405 });
+            const data = await common(ctx, url, req);
+            return adminPage(ctx, url, req, {
+                title: 'purchase_backend.action.createRfq',
+                body: async (_, shell) => rfqCreateScreen(_, {
+                    frame: shell,
+                    action: createPath,
+                    cancelHref: returnTo,
+                    fields: await orderFields(ctx, url, req, _, data),
+                    invalid: url.searchParams.get('invalid'),
+                    setup: { pickingTypes: data.pickingTypes.length, vendors: data.partners.length },
+                }),
+            });
         },
         '/admin/purchase/orders': (ctx) => async (url, req) => {
             if (req.method !== 'GET')
                 return text('GET', { status: 405 });
+            const page = pageOf(url);
+            const search = searchOf(url);
+            const invoice = url.searchParams.get('invoice');
+            const group = url.searchParams.get('group') === 'vendor' ? 'vendor' : null;
             const [orders, data] = await Promise.all([
-                ctx.call('purchase.listOrders', { state: 'purchase' }, url, req),
+                ctx.call('purchase.listOrders', { state: 'purchase', ...(search ? { search } : {}), limit: 2_000 }, url, req),
                 common(ctx, url, req),
             ]);
             const vendors = new Map(data.partners.map((row) => [String(row.id), row.name]));
-            return document(ctx, url, req, 'purchase_backend.orders.title', (_, shell) => ordersScreen(_, {
-                title: _('purchase_backend.orders.title'),
-                frame: shell,
-                rows: orders.map((row) => ({ ...row, partnerName: vendors.get(String(row.partnerId)) })),
-            }));
+            const matching = orders
+                .filter((row) => !invoice || row.invoiceStatus === invoice)
+                .map((row) => ({ ...row, partnerName: vendors.get(String(row.partnerId)) }));
+            const rows = group ? matching : matching.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+            return adminPage(ctx, url, req, {
+                title: 'purchase_backend.orders.title',
+                body: (_, shell) => purchaseOrdersListScreen(_, {
+                    frame: {
+                        ...shell,
+                        chrome: {
+                            search: {
+                                name: 'q',
+                                value: search ?? '',
+                                placeholder: _('purchase_backend.orders.title'),
+                                keep: listKeep(url),
+                                facets: [
+                                    ...(invoice
+                                        ? [
+                                            {
+                                                label: labelOf(_, 'invoiceStatus', invoice),
+                                                without: withParam(url, 'invoice', null),
+                                            },
+                                        ]
+                                        : []),
+                                    ...(group
+                                        ? [
+                                            {
+                                                label: `${_('backend.chrome.groupBy')}: ${_('purchase_backend.field.vendor')}`,
+                                                without: withParam(url, 'group', null),
+                                            },
+                                        ]
+                                        : []),
+                                ],
+                                menus: [
+                                    {
+                                        id: 'filters',
+                                        label: _('backend.chrome.filters'),
+                                        items: ['no', 'to invoice', 'invoiced'].map((value) => ({
+                                            id: `invoice:${value}`,
+                                            label: labelOf(_, 'invoiceStatus', value),
+                                            path: withParam(url, 'invoice', invoice === value ? null : value),
+                                            active: invoice === value,
+                                        })),
+                                    },
+                                    {
+                                        id: 'group',
+                                        label: _('backend.chrome.groupBy'),
+                                        items: [
+                                            {
+                                                id: 'group:vendor',
+                                                label: _('purchase_backend.field.vendor'),
+                                                path: withParam(url, 'group', group === 'vendor' ? null : 'vendor'),
+                                                active: group === 'vendor',
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                            pager: group ? null : pager(url, page, rows.length, matching.length),
+                        },
+                    },
+                    rows,
+                    total: matching.length,
+                    detailSuffix: localeQuery(url),
+                    originHref: inLocale(url, '/admin/purchase/rfqs'),
+                    table: { groups: listGroups(_, url, matching, group) },
+                }),
+            });
         },
         '/admin/purchase/rfqs/{id}': detailHandler,
         '/admin/purchase/orders/{id}': detailHandler,
         '/admin/purchase/vendor-pricelists': (ctx) => async (url, req) => {
+            const listPath = inLocale(url, '/admin/purchase/vendor-pricelists');
             if (req.method === 'POST') {
+                if (crossSite(req))
+                    return text('Forbidden', { status: 403 });
                 const form = await readForm(req);
                 const result = form.action === 'method'
                     ? await ctx.call('purchase.setPurchaseMethod', { templateId: form.templateId ?? '', purchaseMethod: form.purchaseMethod ?? '' }, url, req)
-                    : await ctx.call('purchase.saveSupplierInfo', {
-                        id: randomUUID(),
-                        partnerId: form.partnerId ?? '',
-                        productTemplateId: form.productTemplateId ?? '',
-                        ...optional(form, 'productId'),
-                        productUomId: form.productUomId ?? '',
-                        minQty: form.minQty || '0',
-                        price: form.price || '0',
-                        discount: form.discount || '0',
-                        delay: Number(form.delay || 1),
-                        sequence: Number(form.sequence || 1),
-                        ...optional(form, 'productName'),
-                        ...optional(form, 'productCode'),
-                        ...optional(form, 'dateStart'),
-                        ...optional(form, 'dateEnd'),
-                    }, url, req);
-                return redirect(result, '/admin/purchase/vendor-pricelists');
+                    : await saveSupplierInfo(ctx, url, req, form);
+                return redirect(result, listPath);
             }
             if (req.method !== 'GET')
                 return text('GET or POST', { status: 405 });
@@ -532,6 +871,69 @@ export default defineModule({
             ]);
             const vendors = new Map(data.partners.map((row) => [String(row.id), row.name]));
             const templates = new Map(data.templates.map((row) => [String(row.id), row.name]));
+            const methodFields = [
+                {
+                    name: 'templateId',
+                    label: _('purchase_backend.field.template'),
+                    type: 'select',
+                    options: choices(data.templates),
+                    required: true,
+                    control: await templateRelationControl(ctx, url, req, _, {
+                        id: 'purchase-policy-template',
+                        name: 'templateId',
+                        label: _('purchase_backend.field.template'),
+                        templates: choices(data.templates),
+                        required: true,
+                    }),
+                },
+                {
+                    name: 'purchaseMethod',
+                    label: _('purchase_backend.field.purchaseMethod'),
+                    type: 'select',
+                    options: PURCHASE_METHODS.map((value) => ({ value, label: labelOf(_, 'purchaseMethod', value) })),
+                },
+            ];
+            return adminPage(ctx, url, req, {
+                title: 'purchase_backend.pricelists.title',
+                body: (_, shell) => vendorPricelistsListScreen(_, {
+                    frame: shell,
+                    action: listPath,
+                    createHref: inLocale(url, '/admin/purchase/vendor-pricelists/new'),
+                    currency: data.companies.find((company) => company.id === shell.viewer?.company)?.currency,
+                    methodFields,
+                    invalid: url.searchParams.get('invalid'),
+                    setup: { pickingTypes: data.pickingTypes.length, vendors: data.partners.length },
+                    rows: rows.map((row) => ({
+                        ...row,
+                        id: String(row.id),
+                        partnerId: String(row.partnerId),
+                        productTemplateId: String(row.productTemplateId),
+                        minQty: String(row.minQty),
+                        price: String(row.price),
+                        discount: String(row.discount),
+                        delay: String(row.delay),
+                        partnerName: vendors.has(String(row.partnerId))
+                            ? String(vendors.get(String(row.partnerId)))
+                            : undefined,
+                        productNameDisplay: templates.has(String(row.productTemplateId))
+                            ? String(templates.get(String(row.productTemplateId)))
+                            : undefined,
+                    })),
+                }),
+            });
+        },
+        '/admin/purchase/vendor-pricelists/new': (ctx) => async (url, req) => {
+            const listPath = inLocale(url, '/admin/purchase/vendor-pricelists');
+            const createPath = inLocale(url, '/admin/purchase/vendor-pricelists/new');
+            if (req.method === 'POST') {
+                if (crossSite(req))
+                    return text('Forbidden', { status: 403 });
+                return redirect(await saveSupplierInfo(ctx, url, req, await readForm(req)), listPath, createPath);
+            }
+            if (req.method !== 'GET')
+                return text('GET or POST', { status: 405 });
+            const _ = ctx.translate(ctx.localeOf(url, req));
+            const data = await common(ctx, url, req);
             const fields = [
                 {
                     name: 'partnerId',
@@ -546,6 +948,13 @@ export default defineModule({
                     type: 'select',
                     options: choices(data.templates),
                     required: true,
+                    control: await templateRelationControl(ctx, url, req, _, {
+                        id: 'purchase-vendor-price-template',
+                        name: 'productTemplateId',
+                        label: _('purchase_backend.field.template'),
+                        templates: choices(data.templates),
+                        required: true,
+                    }),
                 },
                 {
                     name: 'productId',
@@ -582,32 +991,24 @@ export default defineModule({
                 { name: 'dateStart', label: _('purchase_backend.field.dateStart'), type: 'date' },
                 { name: 'dateEnd', label: _('purchase_backend.field.dateEnd'), type: 'date' },
             ];
-            const methodFields = [
-                {
-                    name: 'templateId',
-                    label: _('purchase_backend.field.template'),
-                    type: 'select',
-                    options: choices(data.templates),
-                    required: true,
-                },
-                {
-                    name: 'purchaseMethod',
-                    label: _('purchase_backend.field.purchaseMethod'),
-                    type: 'select',
-                    options: PURCHASE_METHODS.map((value) => ({ value, label: labelOf(_, 'purchaseMethod', value) })),
+            return adminPage(ctx, url, req, {
+                title: 'purchase_backend.action.addVendorPrice',
+                body: (_, shell) => {
+                    const company = data.companies.find((entry) => entry.id === shell.viewer?.company);
+                    return vendorPricelistCreateScreen(_, {
+                        frame: shell,
+                        fields,
+                        action: createPath,
+                        cancelHref: listPath,
+                        companyLabel: company
+                            ? String(company.name ?? company.code ?? company.id)
+                            : shell.viewer?.company,
+                        currency: company?.currency,
+                        invalid: url.searchParams.get('invalid'),
+                        setup: { pickingTypes: data.pickingTypes.length, vendors: data.partners.length },
+                    });
                 },
-            ];
-            return document(ctx, url, req, 'purchase_backend.pricelists.title', (_, shell) => supplierInfoScreen(_, {
-                frame: shell,
-                currency: data.companies.find((company) => company.id === shell.viewer?.company)?.currency,
-                fields,
-                methodFields,
-                rows: rows.map((row) => ({
-                    ...row,
-                    partnerName: vendors.get(String(row.partnerId)),
-                    productNameDisplay: templates.get(String(row.productTemplateId)),
-                })),
-            }));
+            });
         },
     },
     messages: { vi, en },