@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/list/filter-editor.tsx

@@ -266,7 +266,6 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           }}
           options={fieldOptions}
           size="$3"
-          compact
           aria-label={t("list.filters.field", "Filter field")}
         />
       </YStack>
@@ -284,7 +283,6 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           }}
           options={operatorOptions}
           size="$3"
-          compact
           aria-label={t("list.filters.condition", "Condition")}
         />
       </YStack>
@@ -343,7 +341,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
             onChangeText={(next) => onChange({ values: [next, row.values[1] ?? ""] })}
             placeholder={placeholder ?? t("list.filters.from", "From")}
             size="$3"
-            compact
             aria-label={t("list.filters.from", "From")}
           />
         </YStack>
@@ -353,7 +350,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
             onChangeText={(next) => onChange({ values: [row.values[0] ?? "", next] })}
             placeholder={placeholder ?? t("list.filters.to", "To")}
             size="$3"
-            compact
             aria-label={t("list.filters.to", "To")}
           />
         </YStack>
@@ -372,7 +368,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
           options={selectOptionsFromField(field?.options)}
           placeholder={t("list.filters.selectValues", "Select values...")}
           size="$3"
-          compact
           aria-label={valueLabel}
         />
       );
@@ -383,7 +378,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
         onChangeText={(next) => onChange({ value: next })}
         placeholder={t("list.filters.commaValues", "Comma separated values")}
         size="$3"
-        compact
         aria-label={valueLabel}
       />
     );
@@ -401,7 +395,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
           options={selectOptionsFromField(field?.options)}
           placeholder={t("list.filters.selectValue", "Select...")}
           size="$3"
-          compact
           aria-label={valueLabel}
         />
       );
@@ -413,7 +406,7 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
           onChange={(next) => onChange({ value: next })}
           doctype={field?.options ?? ""}
           placeholder={t("list.filters.searchValue", "Search...")}
-          compact
+          size="$3"
         />
       );
     }
@@ -430,7 +423,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
           ]}
           placeholder={t("list.filters.selectValue", "Select...")}
           size="$3"
-          compact
           aria-label={valueLabel}
         />
       );
@@ -443,7 +435,6 @@ function FilterValueEditor({ row, field, onChange }: FilterValueEditorProps) {
       onChangeText={(next) => onChange({ value: next })}
       placeholder={kind === "date" ? "YYYY-MM-DD" : t("list.filters.enterValue", "Enter value...")}
       size="$3"
-      compact
       aria-label={valueLabel}
       {...(kind === "number" ? { keyboardType: "numeric" as const } : {})}
     />

package/src/list/filter-saved.tsx

@@ -136,7 +136,6 @@ export function SavedFiltersControl({
               onChangeText={setDraftName}
               placeholder={t("list.filters.filterName", "Filter name")}
               size="$3"
-              compact
               aria-label={t("list.filters.filterName", "Filter name")}
             />
           </YStack>

package/src/list/filter-sort.tsx

@@ -174,7 +174,6 @@ export function SortControl({
               label: option.label,
             }))}
             size="$3"
-            compact
             aria-label={t("list.sortBy", "Sort")}
           />
         </YStack>

package/src/list/filter-standard.tsx

@@ -88,7 +88,6 @@ function StandardFilterControl({
           options={selectOptionsFromField(field.options)}
           placeholder={field.label}
           size="$3"
-          compact
           aria-label={field.label}
         />
       );
@@ -104,7 +103,7 @@ function StandardFilterControl({
           onChange={(next) => commit(next ? [field.fieldname, "=", next] : undefined)}
           doctype={field.options ?? ""}
           placeholder={field.label}
-          compact
+          size="$3"
         />
       );
       return vertical ? <YStack width="100%">{link}</YStack> : link;
@@ -174,7 +173,6 @@ function DebouncedTextFilter({ field, externalValue, commit, vertical }: Debounc
       onChangeText={setDraft}
       placeholder={field.kind === "date" ? `${field.label} (YYYY-MM-DD)` : field.label}
       size="$3"
-      compact
       aria-label={field.label}
       {...(field.kind === "number" ? { keyboardType: "numeric" as const } : {})}
     />

package/src/list/list-tools-sheet.tsx

@@ -13,7 +13,7 @@
 import { Button, SheetModal, SizableText, YStack, isWeb } from "@multiplatform.one/components";
 import { FunnelIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
@@ -32,6 +32,13 @@ export interface ListToolsButtonProps {
   sortField?: string;
   sortOrder?: "asc" | "desc";
   onSortChange?: (field: string, order: "asc" | "desc") => void;
+  /** Group-by facet panel: on phones it lives in this sheet (LC-101). */
+  facets?: ReactNode;
+  /**
+   * Custom trigger in place of the badge-counted Filter button (the compact
+   * list puts it at the end of its chips row). Receives the sheet opener.
+   */
+  renderTrigger?: (open: () => void) => ReactNode;
 }
 
 function SectionLabel({ children }: { children: string }) {
@@ -50,6 +57,8 @@ export function ListToolsButton({
   sortField,
   sortOrder,
   onSortChange,
+  facets,
+  renderTrigger,
 }: ListToolsButtonProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -77,18 +86,22 @@ export function ListToolsButton({
 
   return (
     <>
-      <Button
-        size={knobProps.sizeToken}
-        icon={<FunnelIcon size={iconSize} weight={filters.length > 0 ? "fill" : "regular"} />}
-        onPress={() => handleOpenChange(true)}
-        aria-label={t("list.filters.filter", "Filter")}
-      >
-        {filters.length > 0
-          ? t("list.filters.filterCount", "Filter ({{count}})", {
-              count: filters.length,
-            })
-          : t("list.filters.filter", "Filter")}
-      </Button>
+      {renderTrigger ? (
+        renderTrigger(() => handleOpenChange(true))
+      ) : (
+        <Button
+          size={knobProps.sizeToken}
+          icon={<FunnelIcon size={iconSize} weight={filters.length > 0 ? "fill" : "regular"} />}
+          onPress={() => handleOpenChange(true)}
+          aria-label={t("list.filters.filter", "Filter")}
+        >
+          {filters.length > 0
+            ? t("list.filters.filterCount", "Filter ({{count}})", {
+                count: filters.length,
+              })
+            : t("list.filters.filter", "Filter")}
+        </Button>
+      )}
       <SheetModal
         open={open}
         onOpenChange={handleOpenChange}
@@ -139,6 +152,12 @@ export function ListToolsButton({
               scrollRows={false}
             />
           </YStack>
+          {facets ? (
+            <YStack gap="$2">
+              <SectionLabel>{t("list.tools.groupBy", "Group by")}</SectionLabel>
+              {facets}
+            </YStack>
+          ) : null}
           <YStack gap="$2">
             <SectionLabel>{t("list.filters.savedFilters", "Saved Filters")}</SectionLabel>
             <SavedFiltersControl

package/src/navigation/paths.spec.ts

@@ -12,6 +12,7 @@ import {
   BACKOFFICE_VIEWS,
   createBackofficePaths,
   formPath,
+  formBuilderPath,
   homePath,
   isBackofficeView,
   listPath,
@@ -154,3 +155,21 @@ describe("isBackofficeView", () => {
     expect(isBackofficeView("kanban ")).toBe(false);
   });
 });
+
+describe("form builder paths", () => {
+  it.each(["/backoffice", "/admin", "/"])(
+    "builds a picker and encoded doctype under %s",
+    (base) => {
+      const paths = createBackofficePaths(base);
+      const prefix = base === "/" ? "" : base;
+      expect(paths.formBuilder()).toBe(`${prefix}/customize-form`);
+      expect(paths.formBuilder("Sales Order & Item")).toBe(
+        `${prefix}/customize-form?doc_type=Sales%20Order%20%26%20Item`,
+      );
+    },
+  );
+
+  it("exports a default-bound builder", () => {
+    expect(formBuilderPath("ToDo")).toBe("/backoffice/customize-form?doc_type=ToDo");
+  });
+});

package/src/navigation/paths.ts

@@ -7,6 +7,7 @@
  *   {base}/[slug]/view/[view]       → alternate doctype views (report, kanban, …)
  *   {base}/[slug]/new               → new document (optional `?d=` JSON prefill)
  *   {base}/[slug]/[name]            → document form page
+ *   {base}/customize-form           → form builder (`?doc_type=` picks the DocType)
  *
  * Slugs follow frappe's router slugs: lowercase, spaces → dashes
  * ("Sales Order" → "sales-order").
@@ -92,6 +93,7 @@ export interface BackofficePaths {
    */
   newDoc(doctype: string, defaults?: Record<string, unknown>): string;
   form(doctype: string, name: string): string;
+  formBuilder(doctype?: string): string;
   /** Query/Script Report page (desk /app/query-report/<name>). */
   queryReport(reportName: string): string;
 }
@@ -114,6 +116,8 @@ export function createBackofficePaths(basePath: string = BACKOFFICE_BASE): Backo
       return `${path}?d=${encodeURIComponent(JSON.stringify(defaults))}`;
     },
     form: (doctype, name) => `${prefix}/${toSlug(doctype)}/${encodeURIComponent(name)}`,
+    formBuilder: (doctype) =>
+      `${prefix}/customize-form${doctype ? `?doc_type=${encodeURIComponent(doctype)}` : ""}`,
     queryReport: (reportName) => `${prefix}/query-report/${encodeURIComponent(reportName)}`,
   };
 }
@@ -154,3 +158,7 @@ export const QUERY_REPORT_BASE = "/backoffice/query-report";
 export function queryReportPath(reportName: string): BackofficeSubPath {
   return defaultPaths.queryReport(reportName) as BackofficeSubPath;
 }
+
+export function formBuilderPath(doctype?: string): BackofficeSubPath {
+  return defaultPaths.formBuilder(doctype) as BackofficeSubPath;
+}

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

@@ -152,3 +152,15 @@ describe("<DoctypeReportView />", () => {
     ).toBeTruthy();
   });
 });
+
+it("keeps the report toolbar outside a bounded vertical body scrollport", async () => {
+  renderReport();
+  await waitFor(() => expect(screen.getByText("ACME Corp")).toBeTruthy());
+  const region = screen.getByTestId("frappe-report-scroll");
+  expect(["auto", "scroll"]).toContain(getComputedStyle(region).overflowY);
+  expect(getComputedStyle(region).minHeight).toBe("0px");
+  const content = region.firstElementChild?.firstElementChild as HTMLElement;
+  expect(getComputedStyle(content).flexBasis).toBe("auto");
+  expect(getComputedStyle(content).flexShrink).toBe("0");
+  expect(region.querySelector('[aria-label="Columns"]')).toBeNull();
+});

package/src/report/QueryReportScreen.tsx

@@ -301,7 +301,7 @@ export function QueryReportScreen({
         enablePagination
         initialState={{ pagination: { pageIndex: 0, pageSize: PAGE_SIZES[0] } }}
         renderPagination={(paginationProps) => (
-          <DataTablePagination {...paginationProps} pageSizeOptions={[...PAGE_SIZES]} compact />
+          <DataTablePagination {...paginationProps} pageSizeOptions={[...PAGE_SIZES]} size="$3" />
         )}
       />
     );

package/src/report/queryReportFilterBar.tsx

@@ -100,7 +100,6 @@ function ReportFilterControl({
         required={required}
         disabled
         value={text}
-        compact
         inputProps={{ "aria-label": label }}
       />
     );
@@ -119,7 +118,6 @@ function ReportFilterControl({
           }}
           options={queryReportSelectOptions(filter.options, t("queryReport.allValues", "All"))}
           placeholder={t("queryReport.selectValue", "Select...")}
-          compact
         />
       );
     case "link":
@@ -132,7 +130,6 @@ function ReportFilterControl({
           onChange={(next) => onValueChange(next)}
           doctype={filter.options ?? ""}
           placeholder={label}
-          compact
         />
       );
     case "date":
@@ -144,7 +141,6 @@ function ReportFilterControl({
           disabled={disabled}
           onChange={(next: string) => onValueChange(next)}
           type={fieldtype === "Datetime" ? "datetime" : fieldtype === "Time" ? "time" : "date"}
-          compact
         />
       );
     case "check":
@@ -169,7 +165,6 @@ function ReportFilterControl({
           disabled={disabled}
           value={text}
           onChangeText={(next) => onValueChange(next)}
-          compact
           rightIconInteractive={showClear}
           rightIcon={
             showClear ? (

package/src/shared/sessionUser.spec.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { FrappeProvider } from "@multiplatform.one/frappe-ui";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useWorkspaces } from "../shell/useWorkspaces";
+import { useSessionUserInfo } from "../chrome/user-session";
+import { useNotifications } from "../chrome/notifications-data";
+import { clearSessionUserCache } from "../chrome/user-session";
+import { loadSessionUser } from "./sessionUser";
+import { useSessionUserId } from "./useSessionUserId";
+
+let run = 0;
+let reads = 0;
+let status = 200;
+function Consumers() {
+  const workspaces = useWorkspaces();
+  const { info, loading } = useSessionUserInfo();
+  useNotifications();
+  const id = useSessionUserId();
+  return (
+    <div data-testid="session">
+      {JSON.stringify({ workspace: workspaces.sessionUser, user: info?.user, loading, id })}
+    </div>
+  );
+}
+function Tree({ token = "first" }: { token?: string }) {
+  return (
+    <FrappeProvider
+      baseURL={`https://shared-session-${run}.spec.test`}
+      auth={{ useToken: true, token, type: "Bearer" }}
+      realtime={false}
+    >
+      <Consumers />
+    </FrappeProvider>
+  );
+}
+beforeEach(() => {
+  run += 1;
+  reads = 0;
+  status = 200;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    let body: unknown = { data: [], message: {} };
+    if (url.pathname.endsWith("frappe.auth.get_logged_user")) {
+      reads += 1;
+      body = status === 200 ? { message: "reader@example.test" } : { exc_type: "PermissionError" };
+      return new Response(JSON.stringify(body), {
+        status,
+        headers: { "content-type": "application/json" },
+      });
+    }
+    return new Response(JSON.stringify(body), { headers: { "content-type": "application/json" } });
+  });
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+it.each([200, 401, 403])(
+  "shares identity across consumers and remounts after %s",
+  async (answer) => {
+    status = answer;
+    const view = renderWithProviders(<Tree />);
+    await waitFor(() =>
+      expect(screen.getByTestId("session").textContent).toContain('"loading":false'),
+    );
+    expect(reads).toBe(1);
+    view.unmount();
+    renderWithProviders(<Tree />);
+    await waitFor(() =>
+      expect(screen.getByTestId("session").textContent).toContain('"loading":false'),
+    );
+    expect(reads).toBe(1);
+  },
+);
+it("refetches identity when credentials change", async () => {
+  const view = renderWithProviders(<Tree />);
+  await waitFor(() =>
+    expect(screen.getByTestId("session").textContent).toContain('"loading":false'),
+  );
+  expect(reads).toBe(1);
+  view.rerender(<Tree token="second" />);
+  await waitFor(() => expect(reads).toBe(2));
+});
+
+it("does not retain a failed network request", async () => {
+  const request = vi.fn().mockRejectedValue(new TypeError("Network unavailable"));
+  vi.stubGlobal("fetch", request);
+  const config = { baseURL: `https://network-session-${run}.spec.test` };
+  await expect(loadSessionUser(config)).rejects.toThrow("Network unavailable");
+  request.mockResolvedValue(
+    new Response(JSON.stringify({ message: "reader" }), {
+      headers: { "content-type": "application/json" },
+    }),
+  );
+  await expect(loadSessionUser(config)).resolves.toBe("reader");
+});
+
+it("clears the shared identity when the user menu clears session caches", async () => {
+  const config = { baseURL: `https://logout-session-${run}.spec.test` };
+  await loadSessionUser(config);
+  clearSessionUserCache();
+  await loadSessionUser(config);
+  expect(reads).toBe(2);
+});
+
+it("updates mounted consumers when session caches are cleared", async () => {
+  renderWithProviders(<Tree />);
+  await waitFor(() =>
+    expect(screen.getByTestId("session").textContent).toContain("reader@example.test"),
+  );
+  status = 403;
+  act(() => clearSessionUserCache());
+  await waitFor(() => expect(reads).toBe(2));
+  await waitFor(() =>
+    expect(screen.getByTestId("session").textContent).not.toContain("reader@example.test"),
+  );
+});

package/src/shared/sessionUser.ts

@@ -0,0 +1,80 @@
+import { HttpClient, type AuthConfig } from "@multiplatform.one/frappe";
+import { useFrappeConfig, type FrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+const cache = new Map<string, Promise<string>>();
+let revision = 0;
+const listeners = new Set<() => void>();
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getRevision = () => revision;
+
+export function useSessionRevision(): number {
+  return useSyncExternalStore(subscribe, getRevision, getRevision);
+}
+
+export function sessionUserKey(config: Pick<FrappeConfig, "baseURL" | "auth">): string {
+  const auth = config.auth;
+  return `${config.baseURL}:${auth?.useToken ? "t" : ""}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
+}
+
+export function clearSessionIdentityCache(): void {
+  cache.clear();
+  revision += 1;
+  for (const listener of listeners) listener();
+}
+
+export function loadSessionUser(config: Pick<FrappeConfig, "baseURL" | "auth">): Promise<string> {
+  if (!config.baseURL) return Promise.reject(new Error("No session endpoint"));
+  const key = sessionUserKey(config);
+  let promise = cache.get(key);
+  if (!promise) {
+    const client = new HttpClient(config.baseURL, config.auth as AuthConfig | undefined);
+    promise = client
+      .get<{ message?: string }>("/api/method/frappe.auth.get_logged_user")
+      .then((response) => response.payload?.message || "Guest")
+      .catch((error: unknown) => {
+        const status = (error as { status?: number })?.status;
+        if (status === 401 || status === 403) return "Guest";
+        if (cache.get(key) === promise) cache.delete(key);
+        throw error;
+      });
+    cache.set(key, promise);
+  }
+  return promise;
+}
+
+export function useSessionIdentity(): { user?: string; resolved: boolean } {
+  const config = useFrappeConfig();
+  const revision = useSessionRevision();
+  const key = config?.baseURL && !config.fixtures ? sessionUserKey(config) : undefined;
+  const [state, setState] = useState<{
+    key?: string;
+    revision?: number;
+    user?: string;
+    resolved: boolean;
+  }>({
+    resolved: false,
+  });
+  useEffect(() => {
+    if (!key || !config) return;
+    let cancelled = false;
+    loadSessionUser(config)
+      .then((user) => {
+        if (!cancelled)
+          setState({ key, revision, user: user === "Guest" ? undefined : user, resolved: true });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ key, revision, resolved: true });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, config, revision]);
+  if (!key) return { resolved: true };
+  return state.key === key && state.revision === revision ? state : { resolved: false };
+}

package/src/shared/useSessionUserId.ts

@@ -1,43 +1,5 @@
-// Session user id (for liked-hearts + "assigned to me"), cached per app.
-// (The shell's useSessionUser in shell/useWorkspaces.ts is the HttpClient
-// variant used by the sidebar; this one rides the FrappeApp auth module.)
-import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
-import { useEffect, useState } from "react";
-import { useFrappeApp } from "./useFrappeApp";
+import { useSessionIdentity } from "./sessionUser";
 
-const userCache = new Map<string, Promise<string>>();
-
-/**
- * The logged-in user's id (`frappe.auth.get_logged_user`), or undefined
- * while loading / in fixture mode (no session exists against fixtures).
- */
 export function useSessionUserId(): string | undefined {
-  const config = useFrappeConfig();
-  const app = useFrappeApp();
-  const fixtureMode = Boolean(config?.fixtures);
-  const [user, setUser] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    const baseURL = config?.baseURL;
-    if (!app || fixtureMode || !baseURL) return;
-    let cancelled = false;
-    let promise = userCache.get(baseURL);
-    if (!promise) {
-      promise = app.auth().getLoggedInUser();
-      userCache.set(baseURL, promise);
-      promise.catch(() => userCache.delete(baseURL));
-    }
-    promise
-      .then((value) => {
-        if (!cancelled && value) setUser(value);
-      })
-      .catch(() => {
-        // No session — hearts render unfilled, "me" facets hidden.
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [app, fixtureMode, config?.baseURL]);
-
-  return user;
+  return useSessionIdentity().user;
 }