@ketvietlab/ketsuite 0.1.2 → 0.1.3

package/dist/modules/loyalty_backend/index.js

@@ -1,42 +1,69 @@
 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 { DISCOUNT_APPLICABILITY, DISCOUNT_MODES, POINT_MODES, PROGRAM_APPLIES_ON, PROGRAM_TRIGGERS, PROGRAM_TYPES, REWARD_TYPES, TAX_MODES, } from '../loyalty/types.js';
+import { PAGE_SIZE, pageOf, pager, searchOf, withParam } from '../backend/paging.js';
+import { DISCOUNT_APPLICABILITY, DISCOUNT_MODES, POINT_MODES, PROGRAM_APPLIES_ON, PROGRAM_TRIGGERS, LEDGER_OPERATIONS, PROGRAM_TYPES, REWARD_TYPES, TAX_MODES, } from '../loyalty/types.js';
 import { messages } from './messages.js';
-import { dashboardScreen, ledgerScreen, membershipsScreen, orderLoyaltyScreen, portalScreen, programDetailScreen, programsScreen, walletDetailScreen, walletsScreen, } from './screens.js';
-const localeSuffix = (url) => url.searchParams.get('lang') ? `?lang=${encodeURIComponent(url.searchParams.get('lang'))}` : '';
-const frameFor = async (ctx, url, req, activePath = url.pathname) => {
-    const menuUrl = new URL(url);
-    menuUrl.pathname = activePath;
-    return {
-        navigation: req.headers['x-ket-navigation'] === 'fragment-v1',
-        viewer: await viewerOf(ctx, url, req),
-        menu: await ctx.menu(menuUrl, req),
-        extras: {
-            'nav.items': await ctx.joint(url, req, 'backend:nav.items', { active: activePath }),
-            'topbar.end': await ctx.joint(url, req, 'backend:topbar.end'),
-        },
-    };
+import { dashboardScreen, ledgerScreen, membershipsScreen, orderLoyaltyScreen, portalScreen, programDetailScreen, programsScreen, walletDetailScreen, walletsScreen, } from './screens/index.js';
+import { adminPage, choices, inLocale, optional } from '../backend/screen.js';
+/**
+ * One filter dimension, as the chrome's dropdown wants it.
+ *
+ * Every option toggles: choosing the one already chosen clears it, so a filter
+ * can always be undone from the same place it was set. The URL is the state, so
+ * the back button and a pasted link both do the obvious thing.
+ */
+const filterMenu = (url, id, label, param, current, options) => ({
+    id,
+    label,
+    items: options.map((option) => ({
+        id: `${id}:${option.value}`,
+        label: option.label,
+        path: withParam(url, param, current === option.value ? null : option.value),
+        active: current === option.value,
+    })),
+});
+/** The chips above the table saying which filters are on, each one removable. */
+const filterFacets = (url, active) => active
+    .filter((entry) => Boolean(entry.label))
+    .map((entry) => ({ label: entry.label, without: withParam(url, entry.param, null) }));
+/**
+ * A window over a ledger, chosen by name rather than by date.
+ *
+ * A statement is nearly always read by month or by year, and naming the period
+ * keeps the link shareable — `?period=month` still means this month next week,
+ * which a pair of dates in the URL would not. A free date range would need a
+ * control the shared chrome does not have yet.
+ */
+const PERIODS = ['month', 'quarter', 'year', 'all'];
+const periodWindow = (period) => {
+    const at = new Date();
+    const year = at.getUTCFullYear();
+    if (period === 'year')
+        return { from: new Date(Date.UTC(year, 0, 1)).toISOString(), to: at.toISOString() };
+    if (period === 'quarter')
+        return {
+            from: new Date(Date.UTC(year, Math.floor(at.getUTCMonth() / 3) * 3, 1)).toISOString(),
+            to: at.toISOString(),
+        };
+    if (period === 'month')
+        return { from: new Date(Date.UTC(year, at.getUTCMonth(), 1)).toISOString(), to: at.toISOString() };
+    return {};
 };
-const document = async (ctx, url, req, title, body, activePath) => {
-    const lang = ctx.localeOf(url, req);
-    const _ = ctx.translate(lang);
-    return backendPage(ctx, req, {
-        lang,
-        title: _(title),
-        body: await body(_, await frameFor(ctx, url, req, activePath)),
-    });
+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 bool = (value) => value === '1' || value === 'true' || value === 'on';
-const optional = (form, key) => (form[key] ? { [key]: form[key] } : {});
 const resultErrors = (result, _) => (result?.errors ?? []).map((error) => error.code ? _(error.code, error.params) : String(error.message ?? _('loyalty_backend.error.invalid')));
 const options = (_, values, group) => values.map((value) => ({ value, label: _(`loyalty_backend.${group}.${value}`) }));
-const choices = (rows, empty = false) => [
-    ...(empty ? [{ value: '', label: '—' }] : []),
-    ...rows.map((row) => ({ value: String(row.id), label: String(row.name ?? row.code ?? row.id) })),
-];
 const dataFor = async (ctx, url, req) => {
     const [programs, partners, templates] = await Promise.all([
         ctx.call('loyalty.program.list', { includeArchived: true }, url, req),
@@ -251,31 +278,92 @@ const routes = {
             ctx.call('loyalty.membership.list', { limit: 1000 }, url, req),
             ctx.call('loyalty.ledger.list', { limit: 1000 }, url, req),
         ]);
-        return document(ctx, url, req, 'loyalty_backend.dashboard.title', (_, frame) => dashboardScreen(_, frame, {
-            programs: programs.length,
-            wallets: wallets.length,
-            members: memberships.length,
-            ledger: ledger.length,
-        }));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.dashboard.title',
+            body: (_, frame) => dashboardScreen(_, frame, {
+                programs: programs.length,
+                wallets: wallets.length,
+                members: memberships.length,
+                ledger: ledger.length,
+            }),
+        });
     },
     '/admin/loyalty/programs': (ctx) => async (url, req) => {
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             const result = await ctx.call('loyalty.program.save', { ...programInput(randomUUID(), form), availableSale: true, availablePos: true }, url, req);
             if (result.ok)
-                return seeOther(`/admin/loyalty/programs/${String(result.id)}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, `/admin/loyalty/programs/${String(result.id)}`));
             const _ = ctx.translate(ctx.localeOf(url, req));
-            const rows = (await ctx.call('loyalty.program.list', { includeArchived: true }, url, req));
-            return document(ctx, url, req, 'loyalty_backend.programs.title', (_, frame) => programsScreen(_, frame, rows, createProgramFields(_), resultErrors(result, _)));
+            const [rows, totals] = await Promise.all([
+                ctx.call('loyalty.program.list', { includeArchived: true, limit: PAGE_SIZE }, url, req),
+                ctx.call('loyalty.program.stats', {}, url, req),
+            ]);
+            return adminPage(ctx, url, req, {
+                title: 'loyalty_backend.programs.title',
+                body: (_, frame) => programsScreen(_, frame, rows, totals, createProgramFields(_), resultErrors(result, _)),
+            });
         }
         if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        const rows = (await ctx.call('loyalty.program.list', { includeArchived: true }, url, req));
-        return document(ctx, url, req, 'loyalty_backend.programs.title', (_, frame) => programsScreen(_, frame, rows, createProgramFields(_)));
+        const page = pageOf(url);
+        const search = searchOf(url);
+        const state = url.searchParams.get('state') ?? undefined;
+        const programType = url.searchParams.get('type') ?? undefined;
+        const [rows, totals] = await Promise.all([
+            ctx.call('loyalty.program.list', {
+                includeArchived: true,
+                ...(search ? { search } : {}),
+                ...(state ? { state } : {}),
+                ...(programType ? { programType } : {}),
+                limit: PAGE_SIZE,
+                offset: (page - 1) * PAGE_SIZE,
+            }, url, req),
+            ctx.call('loyalty.program.stats', {}, url, req),
+        ]);
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.programs.title',
+            body: (_, frame) => programsScreen(_, {
+                ...frame,
+                chrome: {
+                    section: _('loyalty_backend.menu.app'),
+                    search: {
+                        name: 'q',
+                        value: search ?? '',
+                        placeholder: _('loyalty_backend.chrome.searchPrograms'),
+                        keep: {
+                            ...(state ? { state } : {}),
+                            ...(programType ? { type: programType } : {}),
+                        },
+                        facets: filterFacets(url, [
+                            { param: 'state', label: state ? _(`loyalty_backend.state.${state}`) : null },
+                            {
+                                param: 'type',
+                                label: programType ? _(`loyalty_backend.programType.${programType}`) : null,
+                            },
+                        ]),
+                        menus: [
+                            filterMenu(url, 'state', _('loyalty_backend.field.state'), 'state', state, [
+                                { value: 'running', label: _('loyalty_backend.state.running') },
+                                { value: 'upcoming', label: _('loyalty_backend.state.upcoming') },
+                                { value: 'archived', label: _('loyalty_backend.state.archived') },
+                                { value: 'ended', label: _('loyalty_backend.state.ended') },
+                            ]),
+                            filterMenu(url, 'type', _('loyalty_backend.field.programType'), 'type', programType, options(_, PROGRAM_TYPES, 'programType')),
+                        ],
+                    },
+                    pager: pager(url, page, rows.length, Number(totals.total ?? 0)),
+                },
+            }, rows, totals, createProgramFields(_)),
+        });
     },
     '/admin/loyalty/programs/{id}': (ctx) => async (url, req, params) => {
         let errors = [];
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             let result;
             if (form.action === 'save-program')
@@ -315,7 +403,7 @@ const routes = {
             else
                 return text('unknown action', { status: 400 });
             if (result.ok)
-                return seeOther(`${url.pathname}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, url.pathname));
             errors = resultErrors(result, ctx.translate(ctx.localeOf(url, req)));
         }
         else if (req.method !== 'GET')
@@ -326,17 +414,23 @@ const routes = {
         ]);
         if (!program)
             return text(ctx.translate(ctx.localeOf(url, req))('loyalty_backend.error.notFound'), { status: 404 });
-        return document(ctx, url, req, 'loyalty_backend.program.detail', (_, frame) => programDetailScreen(_, frame, program, {
-            programFields: programFields(_, program),
-            ruleFields: ruleFields(_, data.products),
-            rewardFields: rewardFields(_, data.products),
-            errors,
-        }));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.program.detail',
+            body: (_, frame) => programDetailScreen(_, frame, program, {
+                programFields: programFields(_, program),
+                ruleFields: ruleFields(_, data.products),
+                rewardFields: rewardFields(_, data.products),
+                tab: url.searchParams.get('tab') ?? 'overview',
+                errors,
+            }),
+        });
     },
     '/admin/loyalty/wallets': (ctx) => async (url, req) => {
         const data = await dataFor(ctx, url, req);
         let errors = [];
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             const id = randomUUID();
             const result = await ctx.call('loyalty.wallet.create', {
@@ -348,40 +442,94 @@ const routes = {
                 ...optional(form, 'expiresAt'),
             }, url, req);
             if (result.ok)
-                return seeOther(`/admin/loyalty/wallets/${id}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, `/admin/loyalty/wallets/${id}`));
             errors = resultErrors(result, ctx.translate(ctx.localeOf(url, req)));
         }
         else if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        const wallets = (await ctx.call('loyalty.wallet.list', { includeArchived: true }, url, req));
+        const page = pageOf(url);
+        const search = searchOf(url);
+        const state = url.searchParams.get('state') ?? undefined;
+        const programId = url.searchParams.get('program') ?? undefined;
+        const [wallets, totals] = await Promise.all([
+            ctx.call('loyalty.wallet.list', {
+                includeArchived: true,
+                ...(search ? { search } : {}),
+                ...(state ? { state } : {}),
+                ...(programId ? { programId } : {}),
+                limit: PAGE_SIZE,
+                offset: (page - 1) * PAGE_SIZE,
+            }, url, req),
+            ctx.call('loyalty.wallet.stats', { ...(programId ? { programId } : {}) }, url, req),
+        ]);
         const names = new Map(data.partners.map((partner) => [String(partner.id), String(partner.name)]));
-        return document(ctx, url, req, 'loyalty_backend.wallets.title', (_, frame) => walletsScreen(_, frame, wallets.map((wallet) => ({ ...wallet, partnerName: names.get(String(wallet.partnerId)) })), [
-            {
-                name: 'programId',
-                label: _('loyalty_backend.field.program'),
-                type: 'select',
-                options: choices(data.programs.filter((program) => program.active)),
-                required: true,
-            },
-            {
-                name: 'partnerId',
-                label: _('loyalty_backend.field.partner'),
-                type: 'select',
-                options: choices(data.partners, true),
-            },
-            { name: 'code', label: _('loyalty_backend.field.code') },
-            {
-                name: 'initialBalance',
-                label: _('loyalty_backend.field.initialBalance'),
-                type: 'decimal',
-                value: 0,
-            },
-            { name: 'expiresAt', label: _('loyalty_backend.field.expiresAt'), type: 'datetime-local' },
-        ], errors));
+        const programNames = new Map(data.programs.map((program) => [String(program.id), String(program.name)]));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.wallets.title',
+            body: (_, frame) => walletsScreen(_, {
+                ...frame,
+                chrome: {
+                    section: _('loyalty_backend.menu.app'),
+                    search: {
+                        name: 'q',
+                        value: search ?? '',
+                        placeholder: _('loyalty_backend.chrome.searchWallets'),
+                        keep: {
+                            ...(state ? { state } : {}),
+                            ...(programId ? { program: programId } : {}),
+                        },
+                        facets: filterFacets(url, [
+                            { param: 'state', label: state ? _(`loyalty_backend.state.${state}`) : null },
+                            { param: 'program', label: programId ? (programNames.get(programId) ?? null) : null },
+                        ]),
+                        menus: [
+                            filterMenu(url, 'state', _('loyalty_backend.field.state'), 'state', state, [
+                                { value: 'active', label: _('loyalty_backend.state.running') },
+                                { value: 'locked', label: _('loyalty_backend.state.locked') },
+                                { value: 'expired', label: _('loyalty_backend.state.expired') },
+                            ]),
+                            filterMenu(url, 'program', _('loyalty_backend.field.program'), 'program', programId, data.programs.map((program) => ({
+                                value: String(program.id),
+                                label: String(program.name),
+                            }))),
+                        ],
+                    },
+                    pager: pager(url, page, wallets.length, Number(totals.total ?? 0)),
+                },
+            }, wallets.map((wallet) => ({
+                ...wallet,
+                partnerName: names.get(String(wallet.partnerId)),
+                programName: programNames.get(String(wallet.programId)),
+            })), totals, [
+                {
+                    name: 'programId',
+                    label: _('loyalty_backend.field.program'),
+                    type: 'select',
+                    options: choices(data.programs.filter((program) => program.active)),
+                    required: true,
+                },
+                {
+                    name: 'partnerId',
+                    label: _('loyalty_backend.field.partner'),
+                    type: 'select',
+                    options: choices(data.partners, true),
+                },
+                { name: 'code', label: _('loyalty_backend.field.code') },
+                {
+                    name: 'initialBalance',
+                    label: _('loyalty_backend.field.initialBalance'),
+                    type: 'decimal',
+                    value: 0,
+                },
+                { name: 'expiresAt', label: _('loyalty_backend.field.expiresAt'), type: 'datetime-local' },
+            ], errors),
+        });
     },
     '/admin/loyalty/wallets/{id}': (ctx) => async (url, req, params) => {
         let errors = [];
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             const result = await ctx.call('loyalty.wallet.adjust', {
                 id: params.id,
@@ -390,40 +538,116 @@ const routes = {
                 ...optional(form, 'note'),
             }, url, req);
             if (result.ok)
-                return seeOther(`${url.pathname}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, url.pathname));
             errors = resultErrors(result, ctx.translate(ctx.localeOf(url, req)));
         }
         else if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        const wallet = (await ctx.call('loyalty.wallet.get', { id: params.id }, url, req));
-        if (!wallet)
+        const held = (await ctx.call('loyalty.wallet.get', { id: params.id }, url, req));
+        if (!held)
             return text(ctx.translate(ctx.localeOf(url, req))('loyalty_backend.error.notFound'), { status: 404 });
-        return document(ctx, url, req, 'loyalty_backend.wallets.title', (_, frame) => walletDetailScreen(_, frame, wallet, [
-            { name: 'amount', label: _('loyalty_backend.field.amount'), type: 'decimal', required: true },
-            {
-                name: 'sourceId',
-                label: _('loyalty_backend.field.sourceId'),
-                value: randomUUID(),
-                required: true,
-            },
-            { name: 'note', label: _('loyalty_backend.field.note'), type: 'textarea', span: 'full' },
-        ], errors));
+        // The wallet carries ids; the screen names a guest and a program, so the
+        // two are resolved here rather than in a summary every other caller pays
+        // for.
+        const [holder, program] = await Promise.all([
+            held.partnerId
+                ? ctx.call('partner.getPartner', { id: held.partnerId }, url, req)
+                : Promise.resolve(null),
+            ctx.call('loyalty.program.get', { id: held.programId }, url, req),
+        ]);
+        const wallet = {
+            ...held,
+            partnerName: holder?.name ?? null,
+            programName: program?.name ?? null,
+        };
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.wallets.title',
+            body: (_, frame) => walletDetailScreen(_, frame, wallet, [
+                { name: 'amount', label: _('loyalty_backend.field.amount'), type: 'decimal', required: true },
+                {
+                    name: 'sourceId',
+                    label: _('loyalty_backend.field.sourceId'),
+                    value: randomUUID(),
+                    required: true,
+                },
+                { name: 'note', label: _('loyalty_backend.field.note'), type: 'textarea', span: 'full' },
+            ], url.searchParams.get('tab') ?? 'overview', errors),
+        });
     },
     '/admin/loyalty/ledger': (ctx) => async (url, req) => {
         if (req.method !== 'GET')
             return text('GET', { status: 405 });
-        const [rows, wallets] = await Promise.all([
-            ctx.call('loyalty.ledger.list', { limit: 500 }, url, req),
-            ctx.call('loyalty.wallet.list', { includeArchived: true }, url, req),
+        const page = pageOf(url);
+        const period = PERIODS.includes((url.searchParams.get('period') ?? ''))
+            ? url.searchParams.get('period')
+            : 'month';
+        const window = periodWindow(period);
+        const operation = url.searchParams.get('operation') ?? undefined;
+        const programId = url.searchParams.get('program') ?? undefined;
+        const walletId = url.searchParams.get('wallet') ?? undefined;
+        const filters = {
+            ...window,
+            ...(operation ? { operation } : {}),
+            ...(programId ? { programId } : {}),
+            ...(walletId ? { walletId } : {}),
+        };
+        const [rows, totals, programs, wallets] = await Promise.all([
+            ctx.call('loyalty.ledger.list', { ...filters, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }, url, req),
+            ctx.call('loyalty.ledger.stats', filters, url, req),
+            ctx.call('loyalty.program.list', { includeArchived: true }, url, req),
+            ctx.call('loyalty.wallet.list', { includeArchived: true, limit: 200 }, url, req),
         ]);
         const codes = new Map(wallets.map((wallet) => [String(wallet.id), String(wallet.code)]));
-        return document(ctx, url, req, 'loyalty_backend.ledger.title', (_, frame) => ledgerScreen(_, frame, rows.map((row) => ({ ...row, walletCode: codes.get(String(row.walletId)) }))));
+        const programNames = new Map(programs.map((program) => [String(program.id), String(program.name)]));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.ledger.title',
+            body: (_, frame) => ledgerScreen(_, {
+                ...frame,
+                chrome: {
+                    section: _('loyalty_backend.menu.app'),
+                    search: {
+                        name: 'q',
+                        value: '',
+                        placeholder: _('loyalty_backend.chrome.searchLedger'),
+                        keep: {
+                            period,
+                            ...(operation ? { operation } : {}),
+                            ...(programId ? { program: programId } : {}),
+                            ...(walletId ? { wallet: walletId } : {}),
+                        },
+                        facets: filterFacets(url, [
+                            { param: 'period', label: _(`loyalty_backend.period.${period}`) },
+                            {
+                                param: 'operation',
+                                label: operation ? _(`loyalty_backend.operation.${operation}`) : null,
+                            },
+                            { param: 'program', label: programId ? (programNames.get(programId) ?? null) : null },
+                            { param: 'wallet', label: walletId ? (codes.get(walletId) ?? null) : null },
+                        ]),
+                        menus: [
+                            filterMenu(url, 'period', _('loyalty_backend.field.period'), 'period', period, PERIODS.map((value) => ({
+                                value,
+                                label: _(`loyalty_backend.period.${value}`),
+                            }))),
+                            filterMenu(url, 'operation', _('loyalty_backend.field.operation'), 'operation', operation, options(_, LEDGER_OPERATIONS, 'operation')),
+                            filterMenu(url, 'program', _('loyalty_backend.field.program'), 'program', programId, programs.map((program) => ({
+                                value: String(program.id),
+                                label: String(program.name),
+                            }))),
+                        ],
+                    },
+                    pager: pager(url, page, rows.length, Number(totals.entries ?? 0)),
+                },
+            }, rows.map((row) => ({ ...row, walletCode: codes.get(String(row.walletId)) })), totals),
+        });
     },
     '/admin/loyalty/memberships': (ctx) => async (url, req) => {
         const data = await dataFor(ctx, url, req);
         const loyaltyPrograms = data.programs.filter((program) => program.programType === 'loyalty' && program.active);
         let errors = [];
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             const result = form.action === 'tier'
                 ? await ctx.call('loyalty.tier.save', {
@@ -445,82 +669,118 @@ const routes = {
                     fallbackEnabled: bool(form.fallbackEnabled),
                 }, url, req);
             if (result.ok)
-                return seeOther(`${url.pathname}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, url.pathname));
             errors = resultErrors(result, ctx.translate(ctx.localeOf(url, req)));
         }
         else if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        const [tiers, memberships, config] = await Promise.all([
+        const page = pageOf(url);
+        const state = url.searchParams.get('state') ?? undefined;
+        const tierId = url.searchParams.get('tier') ?? undefined;
+        const [tiers, memberships, totals, config] = await Promise.all([
             ctx.call('loyalty.tier.list', { includeArchived: true }, url, req),
-            ctx.call('loyalty.membership.list', { limit: 500 }, url, req),
+            ctx.call('loyalty.membership.list', {
+                ...(state ? { state } : {}),
+                ...(tierId ? { tierId } : {}),
+                limit: PAGE_SIZE,
+                offset: (page - 1) * PAGE_SIZE,
+            }, url, req),
+            ctx.call('loyalty.membership.stats', { ...(tierId ? { tierId } : {}) }, url, req),
             ctx.call('loyalty.membership.config.get', {}, url, req),
         ]);
         const names = new Map(data.partners.map((partner) => [String(partner.id), String(partner.name)]));
-        return document(ctx, url, req, 'loyalty_backend.memberships.title', (_, frame) => membershipsScreen(_, frame, memberships.map((membership) => ({
-            ...membership,
-            partnerName: names.get(String(membership.partnerId)),
-        })), tiers, [
-            { name: 'name', label: _('loyalty_backend.field.name'), required: true },
-            { name: 'code', label: _('loyalty_backend.field.code'), required: true },
-            { name: 'sequence', label: _('loyalty_backend.field.sequence'), type: 'number', value: 10 },
-            {
-                name: 'minimumSpend',
-                label: _('loyalty_backend.field.minimumSpend'),
-                type: 'decimal',
-                value: 0,
-                required: true,
-            },
-            {
-                name: 'redeemPercent',
-                label: _('loyalty_backend.field.redeemPercent'),
-                type: 'decimal',
-                value: 100,
-                required: true,
-            },
-        ], [
-            {
-                name: 'programId',
-                label: _('loyalty_backend.field.program'),
-                type: 'select',
-                value: String(config?.programId ?? loyaltyPrograms[0]?.id ?? ''),
-                options: choices(loyaltyPrograms),
-                required: true,
-            },
-            {
-                name: 'windowMonths',
-                label: _('loyalty_backend.field.windowMonths'),
-                type: 'number',
-                value: Number(config?.windowMonths ?? 12),
-                required: true,
-            },
-            {
-                name: 'pointValue',
-                label: _('loyalty_backend.field.pointValue'),
-                type: 'decimal',
-                value: String(config?.pointValue ?? 1),
-                required: true,
-            },
-            {
-                name: 'minimumRedeemStep',
-                label: _('loyalty_backend.field.minimumRedeemStep'),
-                type: 'decimal',
-                value: String(config?.minimumRedeemStep ?? 1),
-                required: true,
-            },
-            {
-                name: 'fallbackCurrencyPerPoint',
-                label: _('loyalty_backend.field.fallbackCurrencyPerPoint'),
-                type: 'decimal',
-                value: String(config?.fallbackCurrencyPerPoint ?? 1),
-                required: true,
-            },
-            {
-                name: 'fallbackEnabled',
-                label: _('loyalty_backend.field.fallbackEnabled'),
-                type: 'checkbox',
-                value: config ? Boolean(config.fallbackEnabled) : true,
-            },
-        ], errors));
+        const tierNames = new Map(tiers.map((tier) => [String(tier.id), String(tier.name)]));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.memberships.title',
+            body: (_, frame) => membershipsScreen(_, {
+                ...frame,
+                chrome: {
+                    section: _('loyalty_backend.menu.app'),
+                    search: {
+                        name: 'q',
+                        value: '',
+                        placeholder: _('loyalty_backend.chrome.searchMembers'),
+                        keep: { ...(state ? { state } : {}), ...(tierId ? { tier: tierId } : {}) },
+                        facets: filterFacets(url, [
+                            { param: 'state', label: state ? _(`loyalty_backend.state.${state}`) : null },
+                            { param: 'tier', label: tierId ? (tierNames.get(tierId) ?? null) : null },
+                        ]),
+                        menus: [
+                            filterMenu(url, 'state', _('loyalty_backend.field.state'), 'state', state, [
+                                { value: 'active', label: _('loyalty_backend.state.active') },
+                                { value: 'dormant', label: _('loyalty_backend.state.dormant') },
+                            ]),
+                            filterMenu(url, 'tier', _('loyalty_backend.field.tier'), 'tier', tierId, tiers.map((tier) => ({ value: String(tier.id), label: String(tier.name) }))),
+                        ],
+                    },
+                    pager: pager(url, page, memberships.length, Number(totals.total ?? 0)),
+                },
+            }, memberships.map((membership) => ({
+                ...membership,
+                partnerName: names.get(String(membership.partnerId)),
+            })), totals, tiers, [
+                { name: 'name', label: _('loyalty_backend.field.name'), required: true },
+                { name: 'code', label: _('loyalty_backend.field.code'), required: true },
+                { name: 'sequence', label: _('loyalty_backend.field.sequence'), type: 'number', value: 10 },
+                {
+                    name: 'minimumSpend',
+                    label: _('loyalty_backend.field.minimumSpend'),
+                    type: 'decimal',
+                    value: 0,
+                    required: true,
+                },
+                {
+                    name: 'redeemPercent',
+                    label: _('loyalty_backend.field.redeemPercent'),
+                    type: 'decimal',
+                    value: 100,
+                    required: true,
+                },
+            ], [
+                {
+                    name: 'programId',
+                    label: _('loyalty_backend.field.program'),
+                    type: 'select',
+                    value: String(config?.programId ?? loyaltyPrograms[0]?.id ?? ''),
+                    options: choices(loyaltyPrograms),
+                    required: true,
+                },
+                {
+                    name: 'windowMonths',
+                    label: _('loyalty_backend.field.windowMonths'),
+                    type: 'number',
+                    value: Number(config?.windowMonths ?? 12),
+                    required: true,
+                },
+                {
+                    name: 'pointValue',
+                    label: _('loyalty_backend.field.pointValue'),
+                    type: 'decimal',
+                    value: String(config?.pointValue ?? 1),
+                    required: true,
+                },
+                {
+                    name: 'minimumRedeemStep',
+                    label: _('loyalty_backend.field.minimumRedeemStep'),
+                    type: 'decimal',
+                    value: String(config?.minimumRedeemStep ?? 1),
+                    required: true,
+                },
+                {
+                    name: 'fallbackCurrencyPerPoint',
+                    label: _('loyalty_backend.field.fallbackCurrencyPerPoint'),
+                    type: 'decimal',
+                    value: String(config?.fallbackCurrencyPerPoint ?? 1),
+                    required: true,
+                },
+                {
+                    name: 'fallbackEnabled',
+                    label: _('loyalty_backend.field.fallbackEnabled'),
+                    type: 'checkbox',
+                    value: config ? Boolean(config.fallbackEnabled) : true,
+                },
+            ], errors),
+        });
     },
     '/admin/loyalty/orders/{channel}/{id}': (ctx) => async (url, req, params) => {
         if (!['sale', 'pos'].includes(params.channel))
@@ -528,6 +788,8 @@ const routes = {
         const prefix = params.channel === 'sale' ? 'loyalty_sale' : 'loyalty_pos';
         let errors = [];
         if (req.method === 'POST') {
+            if (crossSite(req))
+                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
             let result;
             if (form.action === 'code')
@@ -539,7 +801,7 @@ const routes = {
             else
                 return text('unknown action', { status: 400 });
             if (result.ok)
-                return seeOther(`${url.pathname}${localeSuffix(url)}`);
+                return seeOther(inLocale(url, url.pathname));
             errors = resultErrors(result, ctx.translate(ctx.localeOf(url, req)));
         }
         else if (req.method !== 'GET')
@@ -551,16 +813,23 @@ const routes = {
         if (!order)
             return text(ctx.translate(ctx.localeOf(url, req))('loyalty_backend.error.notFound'), { status: 404 });
         const orderName = String(order.name ?? order.posReference ?? order.id);
-        return document(ctx, url, req, 'loyalty_backend.order.title', (_, frame) => orderLoyaltyScreen(_, frame, {
-            channel: params.channel,
-            orderId: params.id,
-            orderName,
-            backHref: params.channel === 'sale'
-                ? `/admin/sales/${['draft', 'sent'].includes(String(order.state)) ? 'quotations' : 'orders'}/${params.id}${localeSuffix(url)}`
-                : `/admin/pos/orders/${params.id}${localeSuffix(url)}`,
-            result: evaluated,
-            errors,
-        }));
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.order.title',
+            body: (_, frame) => orderLoyaltyScreen(_, frame, {
+                channel: params.channel,
+                orderId: params.id,
+                orderName,
+                // A quotation and a confirmed order are two screens, so the branch
+                // picks the path rather than a word inside one.
+                backHref: inLocale(url, params.channel !== 'sale'
+                    ? `/admin/pos/orders/${params.id}`
+                    : ['draft', 'sent'].includes(String(order.state))
+                        ? `/admin/sales/quotations/${params.id}`
+                        : `/admin/sales/orders/${params.id}`),
+                result: evaluated,
+                errors,
+            }),
+        });
     },
     '/my/loyalty': (ctx) => async (url, req) => {
         if (req.method !== 'GET')
@@ -576,15 +845,17 @@ const routes = {
         const summary = (await ctx.call('loyalty.portal.summary', { partnerId: user.partnerId }, url, req));
         if (summary.ok !== true)
             return text(resultErrors(summary, _).join('\n'), { status: 400 });
-        return document(ctx, url, req, 'loyalty_backend.portal.title', (_, frame) => portalScreen(_, frame, summary), '/admin/loyalty');
+        return adminPage(ctx, url, req, {
+            title: 'loyalty_backend.portal.title',
+            active: '/admin/loyalty',
+            body: (_, frame) => portalScreen(_, frame, summary),
+        });
     },
 };
 export default defineModule({
     name: 'loyalty_backend',
     version: '0.1.0',
     depends: ['loyalty', 'loyalty_sale', 'loyalty_pos', 'sale_backend', 'pos_backend', 'backend', 'user'],
-    install: 'auto',
-    app: true,
     title: 'Khách hàng thân thiết trong quản trị',
     summary: 'Cấu hình, báo cáo, tích hợp đơn hàng và tóm tắt portal Loyalty.',
     category: 'Bán hàng',