@multiplatform.one/backoffice 7.23.1 → 7.24.0

package/src/quickEntry/QuickEntryDialog.screen.spec.tsx

@@ -0,0 +1,143 @@
+// Desk quick entry (MPO-414): required fields validate inline, Create inserts
+// and hands back the server name, and doctypes that do not quick-enter route
+// to the full form without drawing the dialog.
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider, type BackofficeFrappeConfig } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { QuickEntryDialog } from "./QuickEntryDialog";
+
+const todoMeta: DoctypeMeta = {
+  name: "ToDo",
+  module: "Desk",
+  quick_entry: 1,
+  autoname: "hash",
+  fields: [
+    { fieldname: "description", fieldtype: "Small Text", label: "Description", reqd: 1 },
+    {
+      fieldname: "priority",
+      fieldtype: "Select",
+      label: "Priority",
+      options: "High\nMedium\nLow",
+      bold: 1,
+      default: "Medium",
+    },
+    { fieldname: "status", fieldtype: "Select", label: "Status", options: "Open\nClosed" },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const invoiceMeta: DoctypeMeta = {
+  name: "Sales Invoice",
+  module: "Accounts",
+  quick_entry: 0,
+  fields: [{ fieldname: "customer", fieldtype: "Data", label: "Customer", reqd: 1 }],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+let host = 0;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function renderDialog(meta: DoctypeMeta, frappe: Partial<BackofficeFrappeConfig> = {}) {
+  host += 1;
+  const onOpenChange = vi.fn();
+  const onCreated = vi.fn();
+  const onEditFullForm = vi.fn();
+  const fixtures = new InMemoryFixtureProvider({ [meta.name]: [] });
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://quick-entry-${host}.screen.spec.test`, fixtures, ...frappe }}
+      navigation={createMemoryNavigator("/backoffice")}
+    >
+      <QuickEntryDialog
+        doctype={meta.name}
+        open
+        onOpenChange={onOpenChange}
+        onCreated={onCreated}
+        onEditFullForm={onEditFullForm}
+        metaOverride={meta}
+      />
+    </BackofficeProvider>,
+  );
+  return { fixtures, onOpenChange, onCreated, onEditFullForm };
+}
+
+function descriptionInput(): HTMLTextAreaElement | HTMLInputElement {
+  const field = screen.getByLabelText("Description", { exact: false });
+  return (
+    field instanceof HTMLTextAreaElement || field instanceof HTMLInputElement
+      ? field
+      : field.querySelector("textarea, input")
+  ) as HTMLTextAreaElement;
+}
+
+describe("QuickEntryDialog", () => {
+  it("holds Create while a required field is empty", async () => {
+    const { onCreated, onOpenChange } = renderDialog(todoMeta);
+    fireEvent.click(await screen.findByTestId("quick-entry-create"));
+    expect(await screen.findByText("Description is required")).toBeTruthy();
+    expect(onCreated).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  it("inserts the draft and hands back the created name", async () => {
+    const { fixtures, onCreated, onOpenChange } = renderDialog(todoMeta);
+    await screen.findByTestId("quick-entry-form");
+    fireEvent.change(descriptionInput(), { target: { value: "Call the vendor" } });
+    fireEvent.click(screen.getByTestId("quick-entry-create"));
+    await waitFor(() => expect(onCreated).toHaveBeenCalledTimes(1));
+    const created = await fixtures.getList("ToDo");
+    expect(created).toHaveLength(1);
+    expect(created[0]?.description).toBe("Call the vendor");
+    expect(onCreated).toHaveBeenCalledWith(created[0]?.name);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("shows a server rejection inline and stays open", async () => {
+    vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+      const url = new URL(String(input instanceof Request ? input.url : input));
+      if (url.pathname.endsWith(".create_doc")) {
+        return new Response(
+          JSON.stringify({
+            exc_type: "ValidationError",
+            exception: "frappe.exceptions.ValidationError: Vendor calls are closed today",
+          }),
+          { status: 417, headers: { "content-type": "application/json" } },
+        );
+      }
+      return new Response(JSON.stringify({ data: [] }), {
+        headers: { "content-type": "application/json" },
+      });
+    });
+    const { onCreated, onOpenChange } = renderDialog(todoMeta, { fixtures: undefined });
+    await screen.findByTestId("quick-entry-form");
+    fireEvent.change(descriptionInput(), { target: { value: "Call the vendor" } });
+    fireEvent.click(screen.getByTestId("quick-entry-create"));
+    const error = await screen.findByTestId("quick-entry-error", {}, { timeout: 5000 });
+    expect(error.textContent).toBe("Vendor calls are closed today");
+    expect(onCreated).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  it("routes a doctype that does not quick-enter to the full form", async () => {
+    const { onEditFullForm, onOpenChange } = renderDialog(invoiceMeta);
+    await waitFor(() => expect(onEditFullForm).toHaveBeenCalledTimes(1));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(screen.queryByTestId("quick-entry-form")).toBeNull();
+    expect(screen.queryByText("New Sales Invoice")).toBeNull();
+  });
+
+  it("escapes to the full form from the footer", async () => {
+    const { onEditFullForm, onOpenChange } = renderDialog(todoMeta);
+    fireEvent.click(await screen.findByTestId("quick-entry-edit-full-form"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onEditFullForm).toHaveBeenCalledTimes(1);
+  });
+});

package/src/quickEntry/QuickEntryDialog.tsx

@@ -25,7 +25,7 @@ import { AsyncSkeleton, ScrollView, Text, XStack, YStack } from "@multiplatform.
 import { AdaptivePopup, Button } from "@multiplatform.one/forms";
 import type { FrappeDocData } from "@multiplatform.one/frappe";
 import { SchemaForm, useFrappeConfig } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeCapabilities } from "../config/BackofficeProvider";
@@ -290,7 +290,12 @@ export function QuickEntryDialog({
     >
       {showForm ? (
         <YStack {...knobProps.gap} testID="quick-entry-form">
-          <ScrollView maxHeight={480}>
+          <ScrollView
+            maxHeight={sizeRecipeEscape(
+              480,
+              "quick entry: the field list scrolls inside the dialog past this height",
+            )}
+          >
             <YStack {...knobProps.gap}>
               {/* A crashing field degrades to its inline error slot (per-field
                   wrapper); a form-level crash costs the mini-form body only —

package/src/report/DoctypeReportView.screen.spec.tsx

@@ -0,0 +1,154 @@
+// The desk report view (MPO-414): rows from the live collection, a row press
+// opens the form, the per-column filter row and the ?f= base filters narrow
+// the result, the desk scope is ANDed in, and Save As round-trips ?report=.
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { DeskScopeProvider } from "../desk/scope";
+import { createMemoryNavigator, type MemoryNavigator } from "../navigation/navigator";
+import type { FrappeFilters } from "../shared/types";
+import { DoctypeReportView } from "./DoctypeReportView";
+
+const orderMeta = {
+  name: "QaReportOrder",
+  doctype: "DocType",
+  module: "QA",
+  title_field: "customer",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [
+    { fieldname: "customer", fieldtype: "Data", label: "Customer", in_list_view: 1 },
+    { fieldname: "amount", fieldtype: "Currency", label: "Amount", in_list_view: 1 },
+    {
+      fieldname: "region",
+      fieldtype: "Select",
+      label: "Region",
+      options: "North\nSouth",
+      in_standard_filter: 1,
+    },
+    {
+      fieldname: "status",
+      fieldtype: "Select",
+      label: "Status",
+      options: "Draft\nPaid",
+      in_list_view: 1,
+    },
+  ],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const orders = [
+  ["QA-ORD-0001", "ACME Corp", "North", "Paid", 1],
+  ["QA-ORD-0002", "Globex", "South", "Draft", 2],
+  ["QA-ORD-0003", "Initech", "North", "Draft", 3],
+].map(([name, customer, region, status, day]) => ({
+  name: String(name),
+  doctype: "QaReportOrder",
+  customer,
+  amount: 1000,
+  region,
+  status,
+  modified: `2026-08-0${day} 09:00:00`,
+}));
+
+let run = 0;
+
+function renderReport(
+  props: { filtersParam?: string; scope?: FrappeFilters; doctype?: string } = {},
+): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice/qareportorder/view/report");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://doctype-report-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({
+          DocType: [orderMeta, { ...orderMeta, name: "QaReportEmpty" }],
+          QaReportOrder: orders,
+          QaReportEmpty: [],
+        }),
+      }}
+      navigation={navigation}
+    >
+      <DeskScopeProvider scope={props.scope}>
+        <DoctypeReportView
+          doctype={props.doctype ?? "QaReportOrder"}
+          filtersParam={props.filtersParam}
+        />
+      </DeskScopeProvider>
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+function rowNames(): string[] {
+  return Array.from(
+    document.querySelectorAll('[data-report-row="true"]'),
+    (row) => row.getAttribute("aria-label") ?? "",
+  );
+}
+
+async function rowsAre(names: string[]) {
+  await waitFor(() => expect(rowNames().sort()).toEqual([...names].sort()), { timeout: 5000 });
+}
+
+describe("<DoctypeReportView />", () => {
+  it("draws a row per record and opens the form on press", async () => {
+    const navigation = renderReport();
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0002", "QA-ORD-0003"]);
+    fireEvent.click(screen.getByText("Globex"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qareportorder/QA-ORD-0002");
+  });
+
+  it("narrows the rows from the column filter row and clears it again", async () => {
+    renderReport();
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0002", "QA-ORD-0003"]);
+    fireEvent.change(await screen.findByRole("textbox", { name: "Filter Region" }), {
+      target: { value: "North" },
+    });
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0003"]);
+    fireEvent.click(screen.getByRole("button", { name: /Clear column filters \(1\)/ }));
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0002", "QA-ORD-0003"]);
+  });
+
+  it("applies the ?f= base filters and drops them from the address on clear", async () => {
+    const navigation = renderReport({
+      filtersParam: encodeURIComponent(JSON.stringify([["status", "=", "Draft"]])),
+    });
+    await rowsAre(["QA-ORD-0002", "QA-ORD-0003"]);
+    fireEvent.click(screen.getByRole("button", { name: "Clear filters" }));
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0002", "QA-ORD-0003"]);
+    expect(navigation.getLocation().path).toBe("/backoffice/qareportorder/view/report");
+  });
+
+  it("ANDs the desk scope in, with nothing to clear", async () => {
+    renderReport({ scope: [["region", "=", "South"]] });
+    await rowsAre(["QA-ORD-0002"]);
+    expect(screen.queryByRole("button", { name: "Clear filters" })).toBeNull();
+  });
+
+  it("says so when the doctype has no records", async () => {
+    renderReport({ doctype: "QaReportEmpty" });
+    expect(await screen.findByText("No results", {}, { timeout: 5000 })).toBeTruthy();
+    expect(screen.getByText("There are no QaReportEmpty records yet")).toBeTruthy();
+  });
+
+  it("saves the current report under a name and selects it", async () => {
+    const navigation = renderReport();
+    await rowsAre(["QA-ORD-0001", "QA-ORD-0002", "QA-ORD-0003"]);
+    fireEvent.click(screen.getByRole("button", { name: "Save As…" }));
+    fireEvent.change(await screen.findByRole("textbox", { name: "New report name" }), {
+      target: { value: "Weekly Northern" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(navigation.getLocation().params.report).toBe("Weekly Northern"), {
+      timeout: 5000,
+    });
+    expect(
+      await screen.findByRole("button", { name: "Report: Weekly Northern" }, { timeout: 5000 }),
+    ).toBeTruthy();
+  });
+});

package/src/report/queryReportFilterBar.tsx

@@ -19,7 +19,7 @@
 // read_only filters pass `disabled` through so pickers open nothing.
 import { View, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button, Checkbox, Input, Select, zIndex } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { XIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -289,8 +289,14 @@ export function QueryReportFilterBar({ filterMeta, filters, onApply }: QueryRepo
         return (
           <YStack
             key={filter.fieldname}
-            minWidth={180}
-            maxWidth={280}
+            minWidth={sizeRecipeEscape(
+              180,
+              "report filter bar: each filter flexes between a readable floor and a cap",
+            )}
+            maxWidth={sizeRecipeEscape(
+              280,
+              "report filter bar: each filter flexes between a readable floor and a cap",
+            )}
             flex={1}
             overflow="visible"
             data-query-report-filter={filter.fieldname}

package/src/report/report-toolbar.tsx

@@ -27,6 +27,7 @@ import { filterTupleLabel } from "@multiplatform.one/frappe-ui";
 import type { FrappeFilters } from "../shared/types";
 import type { SavedReportSummary } from "./savedReports";
 import type { ReportColumnDef } from "./reportViewModel";
+import { dialogBodyMinWidth, overlayListMaxHeight } from "../shared/measures";
 
 export interface ReportToolbarProps {
   /** Every pickable column (reportColumnsFromMeta). */
@@ -113,7 +114,7 @@ export function ReportToolbar({
             })}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.Label>{t("report.pickColumns", "Report columns")}</DropdownMenu.Label>
           {columns.map((column) => {
             const isSelected = selectedSet.has(column.fieldname);
@@ -153,7 +154,7 @@ export function ReportToolbar({
               : t("report.groupBy", "Group by")}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.CheckboxItem
             checked={!groupBy}
             closeOnSelect
@@ -187,7 +188,7 @@ export function ReportToolbar({
               : t("report.savedReport", "Select Report")}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.CheckboxItem
             checked={!currentReport}
             closeOnSelect
@@ -241,7 +242,7 @@ export function ReportToolbar({
             bare boolean leaked to the DOM (LC-46 class). */}
         <PopoverContent {...knobProps.panelPadding}>
           <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-          <XStack gap="$2" alignItems="center" minWidth={280}>
+          <XStack gap="$2" alignItems="center" minWidth={dialogBodyMinWidth}>
             <YStack flex={1} minWidth={0}>
               <Input
                 size="$3"

package/src/shared/measures.ts

@@ -0,0 +1,11 @@
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
+
+export const dialogBodyMinWidth = sizeRecipeEscape(
+  280,
+  "dialog body floor: a reading width for the form inside a dialog or popover",
+);
+
+export const overlayListMaxHeight = sizeRecipeEscape(
+  360,
+  "overlay list cap: a menu or popover list scrolls past this height instead of growing",
+);

package/src/shell/BackofficeShell.tsx

@@ -20,7 +20,12 @@
 import { SizableText, SkipLink, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import * as componentsBarrel from "@multiplatform.one/components";
-import { hairline, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  hairline,
+  sizeRecipeEscape,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { ListIcon, XIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -172,7 +177,14 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
           when the awesomebar capability is off) */}
       <XStack flex={1} minWidth={0} justifyContent="center">
         {capabilities.awesomebar.enabled && (
-          <XStack flex={1} maxWidth={560} minWidth={0}>
+          <XStack
+            flex={1}
+            maxWidth={sizeRecipeEscape(
+              560,
+              "awesomebar: caps the centred search field in the banner",
+            )}
+            minWidth={0}
+          >
             <BackofficeAwesomebar focusRef={awesomebarRef} />
           </XStack>
         )}

package/src/shell/NotFoundScreen.stories.tsx

@@ -7,10 +7,16 @@
 import { YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { NotFoundScreen } from "./NotFoundScreen";
 
+const frameHeight = sizeRecipeEscape(
+  420,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/NotFoundScreen",
   component: NotFoundScreen,
@@ -46,7 +52,7 @@ function Host({
       frappe={{ baseURL: MOCK_HOST, fixtures: new InMemoryFixtureProvider({}) }}
       navigation={navigation}
     >
-      <YStack flex={1} height={420} justifyContent="center">
+      <YStack flex={1} height={frameHeight} justifyContent="center">
         {children}
       </YStack>
     </BackofficeProvider>

package/src/shell/WorkspaceSidebar.tsx

@@ -167,15 +167,16 @@ function WorkspaceNav({ sections }: { sections: SidebarSection[] }) {
           {sections.map((section, sectionIdx) => (
             <YStack key={section.title ?? sectionIdx} {...knobProps.gap}>
               {section.title ? (
-                <SizableText
-                  size="$2"
-                  fontWeight="400"
-                  textTransform="uppercase"
-                  color="$color11"
-                  marginHorizontal={rowPad}
-                >
-                  {section.title}
-                </SizableText>
+                <YStack paddingHorizontal={rowPad}>
+                  <SizableText
+                    size="$2"
+                    fontWeight="400"
+                    textTransform="uppercase"
+                    color="$color11"
+                  >
+                    {section.title}
+                  </SizableText>
+                </YStack>
               ) : null}
               <YStack>
                 {section.items.map((item, itemIdx) => {