@ketvietlab/ketsuite 0.1.25 → 0.1.30

package/dist/modules/hr_backend/search.js

@@ -0,0 +1,67 @@
+// What the search-filter bar offers on the HR lists.
+//
+// Both lists read a bounded collection the route already holds, so each spec
+// covers exactly the columns its table renders. Employees declare `active` so
+// the bar carries the archived toggle; the roster is a week grid rather than a
+// list, so it keeps its own branch and week controls.
+import { defineRowList } from '../backend/row-list.js';
+export const employeeListSearch = defineRowList({
+    key: 'hr.employees',
+    searchable: [{ key: 'code' }, { key: 'name' }, { key: 'branch' }, { key: 'timezone' }],
+    filterable: [
+        { key: 'code', label: 'hr_backend.field.code', type: 'text' },
+        { key: 'name', label: 'hr_backend.field.name', type: 'text' },
+        { key: 'branch', label: 'hr_backend.field.branchId', type: 'text' },
+        { key: 'timezone', label: 'hr_backend.field.timezone', type: 'text' },
+        // Declaring this is what gives the bar its archived toggle, which
+        // supersedes a preset over the same field.
+        { key: 'active', label: 'hr_backend.field.state', type: 'boolean' },
+    ],
+    groupable: [
+        { key: 'branch', label: 'hr_backend.field.branchId' },
+        { key: 'timezone', label: 'hr_backend.field.timezone' },
+    ],
+    sortable: [
+        { key: 'code', label: 'hr_backend.field.code' },
+        { key: 'name', label: 'hr_backend.field.name' },
+        { key: 'branch', label: 'hr_backend.field.branchId' },
+    ],
+    defaultSort: [{ key: 'code', dir: 'asc' }],
+});
+const LEAVE_STATES = ['requested', 'approved', 'rejected', 'cancelled'];
+export const leaveListSearch = defineRowList({
+    key: 'hr.leaves',
+    searchable: [
+        { key: 'id' },
+        { key: 'employee' },
+        { key: 'leaveType' },
+        { key: 'dateFrom' },
+        { key: 'dateTo' },
+        { key: 'reason' },
+    ],
+    filterable: [
+        { key: 'employee', label: 'hr_backend.field.employee', type: 'text' },
+        { key: 'leaveType', label: 'hr_backend.field.leaveType', type: 'text' },
+        { key: 'dateFrom', label: 'hr_backend.field.startAt', type: 'date' },
+        { key: 'dateTo', label: 'hr_backend.field.stopAt', type: 'date' },
+        { key: 'requestedDays', label: 'hr_backend.field.days', type: 'number' },
+        { key: 'state', label: 'hr_backend.field.state', type: 'selection', choices: LEAVE_STATES },
+    ],
+    groupable: [
+        { key: 'state', label: 'hr_backend.field.state' },
+        { key: 'employee', label: 'hr_backend.field.employee' },
+        { key: 'leaveType', label: 'hr_backend.field.leaveType' },
+    ],
+    sortable: [
+        { key: 'dateFrom', label: 'hr_backend.field.startAt' },
+        { key: 'employee', label: 'hr_backend.field.employee' },
+    ],
+    presets: LEAVE_STATES.map((state) => ({
+        key: state,
+        label: `hr_backend.state.${state}`,
+        group: 'state',
+        match: (row) => row.state === state,
+    })),
+    defaultSort: [{ key: 'dateFrom', dir: 'asc' }],
+});
+//# sourceMappingURL=search.js.map

package/dist/modules/hr_backend/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../../../../packages/ketsuite/src/modules/hr_backend/search.ts"],"names":[],"mappings":"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"}

package/dist/modules/livedoc/islands.d.ts

@@ -14,7 +14,17 @@ export declare const islands: {
         client: string;
         export: string;
         view: (props: Readonly<LiveDocProps>) => {
+            prepareImageInsertion: () => (image: {
+                src: string;
+                alt: string;
+            }) => boolean;
+            updateImage: (index: number, patch: {
+                width?: number;
+                align?: string;
+            }) => boolean;
+            removeImage: (index: number) => boolean;
             view: () => import("@ketvietlab/ketjs-view").TemplateResult;
+            getValue: () => import("../../ui/client/live-doc-view.tsx").LiveDocValue;
             dispose(): void;
             mountEditor: (el: HTMLElement) => Promise<void>;
             containerId: string;

package/dist/modules/livedoc/islands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"islands.d.ts","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/modules/livedoc/islands.ts"],"names":[],"mappings":"AAGA,KAAK,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE,eAAO,MAAM,OAAO;IAClB,gBAAgB;;YAIL,KAAK;YAAU,IAAI;YAAU,IAAI;;;;;;;;;;;;CAe7C,CAAA"}
+{"version":3,"file":"islands.d.ts","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/modules/livedoc/islands.ts"],"names":[],"mappings":"AAGA,KAAK,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE,eAAO,MAAM,OAAO;IAClB,gBAAgB;;YAIL,KAAK;YAAU,IAAI;YAAU,IAAI;;;;;;;;;;;;;;;;;;;;;;CAe7C,CAAA"}

package/dist/modules/loyalty_backend/index.js

@@ -1,8 +1,13 @@
+import { rowListSearch } from '../backend/row-list.js';
+import { listSearchChrome } from '../backend/search-filter.js';
+import { searchFilterFunctions } from './search-functions.js';
+import { ledgerListSearch, membershipListSearch, programListSearch, tierListSearch, walletListSearch, } from './search.js';
+import { parseListState } from '@ketvietlab/ketjs';
 import { newProgramRoute, programWorkspaceRoute } from './program-workspace.js';
 import { randomUUID } from 'node:crypto';
 import { defineModule, text } from '@ketvietlab/ketjs';
 import { formRefusal, readForm, seeOther } from '../backend/forms.js';
-import { PAGE_SIZE, pageOf, pager, searchOf, withParam } from '../backend/paging.js';
+import { PAGE_SIZE, pageOf, pager, withParam } from '../backend/paging.js';
 import { LEDGER_OPERATIONS, PROGRAM_TYPES } from '../loyalty/types.js';
 import { tierFormSchema } from '../loyalty/admin-functions.js';
 import { messages } from './messages.js';
@@ -15,6 +20,21 @@ import { adminPage, choices, inLocale, optional } from '../backend/screen.js';
  * 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.
  */
+/** Every loyalty list shares one set of functions; see `search-functions.ts`. */
+const loyaltySearchFunctions = {
+    apply: 'loyalty_backend.applySearchFilter',
+    saveFavorite: 'loyalty_backend.saveSearchFavorite',
+    deleteFavorite: 'loyalty_backend.deleteSearchFavorite',
+    setDefaultFavorite: 'loyalty_backend.setDefaultSearchFavorite',
+};
+/**
+ * The first preset the reader picked from one group.
+ *
+ * These lists are paged and filtered by their domain functions, and each of
+ * those takes a single value per dimension, so alternatives within a group
+ * cannot accumulate the way they do over an in-memory collection.
+ */
+const presetIn = (presets, group) => presets.find((preset) => group.includes(preset));
 const filterMenu = (url, id, label, param, current, options) => ({
     id,
     label,
@@ -25,13 +45,6 @@ const filterMenu = (url, id, label, param, current, options) => ({
         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.
  *
@@ -41,6 +54,9 @@ const filterFacets = (url, active) => active
  * control the shared chrome does not have yet.
  */
 const PERIODS = ['month', 'quarter', 'year', 'all'];
+const PROGRAM_STATE_PRESETS = ['draft', 'running', 'upcoming', 'archived', 'ended'];
+const WALLET_STATE_PRESETS = ['active', 'locked', 'expired'];
+const MEMBERSHIP_STATE_PRESETS = ['active', 'dormant'];
 const periodWindow = (period) => {
     const at = new Date();
     const year = at.getUTCFullYear();
@@ -132,9 +148,10 @@ const routes = {
         if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
         const page = pageOf(url);
-        const search = searchOf(url);
-        const state = url.searchParams.get('state') ?? undefined;
-        const programType = url.searchParams.get('type') ?? undefined;
+        const { state: listState } = parseListState(programListSearch, url);
+        const search = listState.q ?? '';
+        const state = presetIn(listState.presets, PROGRAM_STATE_PRESETS);
+        const programType = presetIn(listState.presets, PROGRAM_TYPES);
         const [rows, totals] = await Promise.all([
             ctx.call('loyalty.program.list', {
                 includeArchived: true,
@@ -148,57 +165,23 @@ const routes = {
         ]);
         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: 'draft',
-                                    label: _('loyalty_backend.state.draft'),
-                                },
-                                {
-                                    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')),
-                        ],
+            body: async (_, frame) => {
+                const chrome = await listSearchChrome(ctx, url, req, {
+                    spec: programListSearch,
+                    frame,
+                    name: 'loyalty-program-filter',
+                    bodyId: 'loyalty-program-list',
+                    functions: loyaltySearchFunctions,
+                    labels: { searchPlaceholder: _('loyalty_backend.chrome.searchPrograms') },
+                });
+                return programsScreen(_, {
+                    ...chrome.frame,
+                    chrome: {
+                        ...chrome.frame.chrome,
+                        pager: pager(url, page, rows.length, Number(totals.total ?? 0)),
                     },
-                    pager: pager(url, page, rows.length, Number(totals.total ?? 0)),
-                },
-            }, rows, totals, createProgramFields(_)),
+                }, rows, totals, createProgramFields(_));
+            },
         });
     },
     '/admin/loyalty/programs/new': newProgramRoute,
@@ -226,8 +209,12 @@ const routes = {
         else if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
         const page = pageOf(url);
-        const search = searchOf(url);
-        const state = url.searchParams.get('state') ?? undefined;
+        const { state: listState } = parseListState(walletListSearch, url);
+        const search = listState.q ?? '';
+        const state = presetIn(listState.presets, WALLET_STATE_PRESETS);
+        // Which program's wallets these are stays the screen's own selector: a
+        // program is chosen by name out of however many exist, which is not
+        // something a fixed list of presets can offer.
         const programId = url.searchParams.get('program') ?? undefined;
         const [wallets, totals] = await Promise.all([
             ctx.call('loyalty.wallet.list', {
@@ -244,82 +231,59 @@ const routes = {
         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'),
-                                },
-                            ]),
+            body: async (_, frame) => {
+                const chrome = await listSearchChrome(ctx, url, req, {
+                    spec: walletListSearch,
+                    frame,
+                    name: 'loyalty-wallet-filter',
+                    bodyId: 'loyalty-wallet-list',
+                    functions: loyaltySearchFunctions,
+                    labels: { searchPlaceholder: _('loyalty_backend.chrome.searchWallets') },
+                });
+                return walletsScreen(_, {
+                    ...chrome.frame,
+                    chrome: {
+                        ...chrome.frame.chrome,
+                        tailMenus: [
                             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)),
                     },
-                    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),
+                }, 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) => {
@@ -385,11 +349,13 @@ const routes = {
         if (req.method !== 'GET')
             return text('GET', { status: 405 });
         const page = pageOf(url);
-        const period = PERIODS.includes((url.searchParams.get('period') ?? ''))
-            ? url.searchParams.get('period')
-            : 'month';
+        const { state: listState } = parseListState(ledgerListSearch, url);
+        const periodPreset = presetIn(listState.presets, PERIODS.map((value) => `period-${value}`));
+        const period = periodPreset ? periodPreset.slice('period-'.length) : 'month';
         const window = periodWindow(period);
-        const operation = url.searchParams.get('operation') ?? undefined;
+        const operation = presetIn(listState.presets, LEDGER_OPERATIONS);
+        // A program and a wallet are chosen by name out of however many exist, so
+        // they stay the screen's own selectors beside the bar.
         const programId = url.searchParams.get('program') ?? undefined;
         const walletId = url.searchParams.get('wallet') ?? undefined;
         const filters = {
@@ -405,67 +371,45 @@ const routes = {
             ctx.call('loyalty.wallet.list', { includeArchived: true, limit: 200 }, url, req),
         ]);
         const codes = new Map(wallets.map((wallet) => [String(wallet.id), String(wallet.code)]));
-        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')),
+            body: async (_, frame) => {
+                const chrome = await listSearchChrome(ctx, url, req, {
+                    spec: ledgerListSearch,
+                    frame,
+                    name: 'loyalty-ledger-filter',
+                    bodyId: 'loyalty-ledger-list',
+                    functions: loyaltySearchFunctions,
+                    labels: { searchPlaceholder: _('loyalty_backend.chrome.searchLedger') },
+                });
+                return ledgerScreen(_, {
+                    ...chrome.frame,
+                    chrome: {
+                        ...chrome.frame.chrome,
+                        tailMenus: [
                             filterMenu(url, 'program', _('loyalty_backend.field.program'), 'program', programId, programs.map((program) => ({
                                 value: String(program.id),
                                 label: String(program.name),
                             }))),
+                            filterMenu(url, 'wallet', _('loyalty_backend.field.wallet'), 'wallet', walletId, wallets.map((wallet) => ({ value: String(wallet.id), label: String(wallet.code) }))),
                         ],
+                        pager: pager(url, page, rows.length, Number(totals.entries ?? 0)),
                     },
-                    pager: pager(url, page, rows.length, Number(totals.entries ?? 0)),
-                },
-            }, rows.map((row) => ({
-                ...row,
-                walletCode: codes.get(String(row.walletId)),
-            })), totals),
+                }, rows.map((row) => ({
+                    ...row,
+                    walletCode: codes.get(String(row.walletId)),
+                })), totals);
+            },
         });
     },
     '/admin/loyalty/memberships': (ctx) => async (url, req) => {
         if (req.method !== 'GET')
             return text('GET', { status: 405 });
         const page = pageOf(url);
+        // A tier is chosen by name, so it stays the screen's own selector.
         const tierId = url.searchParams.get('tier') ?? undefined;
-        const state = url.searchParams.get('state') ?? undefined;
+        const { state: listState } = parseListState(membershipListSearch, url);
+        const state = presetIn(listState.presets, MEMBERSHIP_STATE_PRESETS);
         const filters = {
             ...(tierId ? { tierId } : {}),
             ...(state ? { state } : {}),
@@ -478,23 +422,28 @@ const routes = {
         const tierNames = new Map(tiers.map((tier) => [String(tier.id), String(tier.name)]));
         return adminPage(ctx, url, req, {
             title: 'loyalty_backend.members.title',
-            body: (_, frame) => membershipsScreen(_, {
-                ...frame,
-                chrome: {
-                    section: _('loyalty_backend.menu.app'),
-                    tailMenus: [
-                        filterMenu(url, 'state', _('loyalty_backend.field.activity'), '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, rows.length, Number(totals.total ?? 0)),
-                },
-            }, rows.map((row) => ({
-                ...row,
-                tierName: row.tierName ?? tierNames.get(String(row.tierId)),
-            })), totals),
+            body: async (_, frame) => {
+                const chrome = await listSearchChrome(ctx, url, req, {
+                    spec: membershipListSearch,
+                    frame,
+                    name: 'loyalty-membership-filter',
+                    bodyId: 'loyalty-membership-list',
+                    functions: loyaltySearchFunctions,
+                });
+                return membershipsScreen(_, {
+                    ...chrome.frame,
+                    chrome: {
+                        ...chrome.frame.chrome,
+                        tailMenus: [
+                            filterMenu(url, 'tier', _('loyalty_backend.field.tier'), 'tier', tierId, tiers.map((tier) => ({ value: String(tier.id), label: String(tier.name) }))),
+                        ],
+                        pager: pager(url, page, rows.length, Number(totals.total ?? 0)),
+                    },
+                }, rows.map((row) => ({
+                    ...row,
+                    tierName: row.tierName ?? tierNames.get(String(row.tierId)),
+                })), totals);
+            },
         });
     },
     '/admin/loyalty/tiers': (ctx) => async (url, req) => {
@@ -610,21 +559,32 @@ const routes = {
         const closeHref = baseHref();
         return adminPage(ctx, url, req, {
             title: 'loyalty_backend.memberships.title',
-            body: (_, frame) => tiersScreen(_, frame, tiers, {
-                action: url.pathname + url.search,
-                closeHref,
-                createHref: create.pathname + create.search,
-                tierHref: (row) => {
-                    const target = new URL(closeHref, url.origin);
-                    target.searchParams.set('modal', 'tier');
-                    target.searchParams.set('tier', String(row.id));
-                    return target.pathname + target.search;
-                },
-                tierFields,
-                tierErrors: submittedAction === 'tier' ? refusal.sentences() : [],
-                tier,
-                modal,
-            }),
+            body: async (_, frame) => {
+                const search = await rowListSearch(ctx, url, req, {
+                    spec: tierListSearch,
+                    rows: tiers,
+                    frame,
+                    name: 'loyalty-tier-filter',
+                    bodyId: 'loyalty-tier-list',
+                    functions: loyaltySearchFunctions,
+                    labels: { searchPlaceholder: _('loyalty_backend.tiers.title') },
+                });
+                return tiersScreen(_, search.frame, search.rows, {
+                    action: url.pathname + url.search,
+                    closeHref,
+                    createHref: create.pathname + create.search,
+                    tierHref: (row) => {
+                        const target = new URL(closeHref, url.origin);
+                        target.searchParams.set('modal', 'tier');
+                        target.searchParams.set('tier', String(row.id));
+                        return target.pathname + target.search;
+                    },
+                    tierFields,
+                    tierErrors: submittedAction === 'tier' ? refusal.sentences() : [],
+                    tier,
+                    modal,
+                });
+            },
         });
     },
     '/admin/loyalty/orders/{channel}/{id}': (ctx) => async (url, req, params) => {
@@ -707,6 +667,7 @@ export default defineModule({
     name: 'loyalty_backend',
     version: '0.1.0',
     depends: ['loyalty', 'loyalty_sale', 'loyalty_pos', 'sale_backend', 'pos_backend', 'backend', 'user'],
+    functions: searchFilterFunctions,
     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',