@multiplatform.one/backoffice 7.23.1 → 7.24.0

package/src/views/CalendarView.screen.spec.tsx

@@ -0,0 +1,241 @@
+// The calendar view (MPO-414): a Calendar View settings doc picks the date
+// axis, an event opens its form, the selector writes ?field=, and a day click
+// starts a record prefilled with that day only for a session that may create
+// (MPO-390).
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator, type MemoryNavigator } from "../navigation/navigator";
+import { CalendarView } from "./CalendarView";
+
+const eventMeta = {
+  name: "QaCalEvent",
+  doctype: "DocType",
+  module: "QA",
+  fields: [
+    { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+    { fieldname: "created_on", fieldtype: "Date", label: "Created On" },
+    { fieldname: "scheduled_at", fieldtype: "Datetime", label: "Scheduled At" },
+    { fieldname: "wrap_up_at", fieldtype: "Datetime", label: "Wrap Up At" },
+  ],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const multiMeta = {
+  name: "QaCalMulti",
+  doctype: "DocType",
+  module: "QA",
+  title_field: "title",
+  fields: [
+    { fieldname: "title", fieldtype: "Data", label: "Title", in_list_view: 1 },
+    { fieldname: "due_date", fieldtype: "Date", label: "Due Date" },
+    { fieldname: "follow_up_on", fieldtype: "Date", label: "Follow Up On" },
+  ],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const noDateMeta = {
+  name: "QaCalNone",
+  doctype: "DocType",
+  module: "QA",
+  fields: [{ fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 }],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const moveMeta = {
+  name: "Poke Move",
+  doctype: "DocType",
+  title_field: "move_name",
+  fields: [
+    { fieldname: "move_name", fieldtype: "Data", label: "Move Name", in_list_view: 1 },
+    { fieldname: "learned_on", fieldtype: "Date", label: "Learned On" },
+  ],
+  permissions: [
+    { role: "Pokemon Editor", read: 1, write: 1, create: 1, delete: 1 },
+    { role: "Guest", read: 1 },
+  ],
+};
+
+function dayKey(date: Date): string {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+
+const today = dayKey(new Date());
+
+const events = [
+  {
+    name: "QCE-001",
+    doctype: "QaCalEvent",
+    subject: "Team sync",
+    created_on: "2020-01-01",
+    scheduled_at: `${today} 09:00:00`,
+    wrap_up_at: `${today} 10:00:00`,
+  },
+];
+
+const calendarViewDoc = {
+  name: "QaCalEvent Calendar",
+  doctype: "Calendar View",
+  reference_doctype: "QaCalEvent",
+  subject_field: "subject",
+  start_date_field: "scheduled_at",
+  end_date_field: "wrap_up_at",
+};
+
+let run = 0;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function renderFixtureCalendar(doctype: string, dateField?: string): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://calendar-view-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({
+          DocType: [eventMeta, multiMeta, noDateMeta],
+          "Calendar View": [calendarViewDoc],
+          QaCalEvent: events,
+          QaCalMulti: [],
+        }),
+      }}
+      navigation={navigation}
+    >
+      <CalendarView doctype={doctype} dateField={dateField} />
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+function json(body: unknown) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+function renderBenchCalendar(roles: string[]) {
+  run += 1;
+  let rolesAnswered = false;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const method = url.pathname.replace(/^\/api\/method\//, "");
+    if (method === "frappe.auth.get_logged_user") return json({ message: "user@pokemon.test" });
+    if (method === "frappe.core.doctype.user.user.get_roles") {
+      rolesAnswered = true;
+      return json({ message: roles });
+    }
+    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [moveMeta] });
+    if (url.pathname === `/api/resource/${encodeURIComponent("Poke Move")}`) {
+      return json({
+        data: [{ name: "m1", doctype: "Poke Move", move_name: "tackle", learned_on: today }],
+      });
+    }
+    return json({ data: [], message: [] });
+  });
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://calendar-view-bench-${run}.spec.test` }}
+      navigation={navigation}
+    >
+      <CalendarView doctype="Poke Move" />
+    </BackofficeProvider>,
+  );
+  return { navigation, rolesAnswered: () => rolesAnswered };
+}
+
+async function todayCell(): Promise<HTMLElement> {
+  return waitFor(
+    () => {
+      const cell = document.querySelector(`[data-calendar-day="${today}"]`);
+      expect(cell).toBeTruthy();
+      return cell as HTMLElement;
+    },
+    { timeout: 5000 },
+  );
+}
+
+function draggable(title: string): boolean {
+  let node: HTMLElement | null = screen.getByText(title);
+  for (let depth = 0; node && depth < 6; depth += 1) {
+    if (node.className.includes("_cur-grab")) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+
+async function settle(ms = 300) {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+describe("<CalendarView />", () => {
+  it("lays events on the settings doc's axis and opens the form on press", async () => {
+    const navigation = renderFixtureCalendar("QaCalEvent");
+    expect(
+      await screen.findByLabelText("Choose calendar date field", {}, { timeout: 5000 }),
+    ).toHaveProperty("textContent", "Scheduled At");
+    fireEvent.click(await screen.findByText("Team sync", {}, { timeout: 5000 }));
+    expect(navigation.getLocation().path).toBe("/backoffice/qacalevent/QCE-001");
+  });
+
+  it("writes the picked date field into ?field=", async () => {
+    const navigation = renderFixtureCalendar("QaCalMulti");
+    fireEvent.click(
+      await screen.findByLabelText("Choose calendar date field", {}, { timeout: 5000 }),
+    );
+    fireEvent.click(await screen.findByText("Follow Up On", {}, { timeout: 5000 }));
+    await waitFor(() => expect(navigation.getLocation().params.field).toBe("follow_up_on"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qacalmulti/view/calendar");
+  });
+
+  it("starts a record prefilled with the clicked day", async () => {
+    const navigation = renderFixtureCalendar("QaCalMulti");
+    fireEvent.click(await todayCell());
+    await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice/qacalmulti/new"));
+    const prefill = navigation.getLocation().params.d;
+    expect(JSON.parse(String(prefill))).toEqual({ due_date: today });
+  });
+
+  it("offers the list back when the doctype has no date field", async () => {
+    const navigation = renderFixtureCalendar("QaCalNone");
+    expect(await screen.findByText("Calendar not available", {}, { timeout: 5000 })).toBeTruthy();
+    fireEvent.click(screen.getByText("Back to list"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qacalnone");
+  });
+
+  it("lets an editor move events and start a record from a day on a live bench", async () => {
+    const bench = renderBenchCalendar(["Pokemon Editor", "Guest"]);
+    const cell = await todayCell();
+    await screen.findByText("tackle", {}, { timeout: 5000 });
+    await waitFor(() => expect(bench.rolesAnswered()).toBe(true), { timeout: 5000 });
+    await waitFor(() => expect(draggable("tackle")).toBe(true));
+    fireEvent.click(cell);
+    await waitFor(() =>
+      expect(bench.navigation.getLocation().path).toBe("/backoffice/poke-move/new"),
+    );
+  });
+
+  it("neither moves events nor starts a record for a reader on a live bench", async () => {
+    const bench = renderBenchCalendar(["Guest"]);
+    const cell = await todayCell();
+    await screen.findByText("tackle", {}, { timeout: 5000 });
+    await settle();
+    expect(draggable("tackle")).toBe(false);
+    fireEvent.click(cell);
+    await settle(100);
+    expect(bench.navigation.getLocation().path).toBe("/backoffice");
+    expect(bench.rolesAnswered()).toBe(true);
+  });
+});

package/src/views/CalendarView.tsx

@@ -9,7 +9,12 @@
 // Event click opens the form; day/slot click starts a new document
 // prefilled with the clicked date (`?d=` param on the /new route).
 import { XStack, YStack } from "@multiplatform.one/components";
-import { FrappeCalendar, type FrappeCalendarProps } from "@multiplatform.one/frappe-ui";
+import {
+  FrappeCalendar,
+  useDocRights,
+  useFrappeConfig,
+  type FrappeCalendarProps,
+} from "@multiplatform.one/frappe-ui";
 import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
@@ -73,6 +78,7 @@ export function CalendarView({
   const connection = useViewConnection();
   const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
   const settings = useCalendarViewSettings(connection, doctype);
+  const { rights } = useDocRights(useFrappeConfig(), meta);
 
   if (isMetaLoading || settings.isLoading) return <ViewLoading />;
   if (metaError && !meta) return <ViewError doctype={doctype} error={metaError} />;
@@ -168,16 +174,18 @@ export function CalendarView({
         defaultView="month"
         showNavigation
         showViewSwitcher
+        enableEventDrag={rights.write}
         onEventClick={(doc) => {
           if (doc.name) navigator.navigate(paths.form(doctype, doc.name));
         }}
         // Desk parity: desk seeds its new-event form with the clicked day
         // (and slot time in week/day grids) — the date rides the `?d=`
         // prefill param into the create form, shaped to the field's type.
-        // `onSlotCreate` overrides; the default is gated by `newDoc`.
+        // `onSlotCreate` overrides; the default is gated by `newDoc` and the
+        // session's create right.
         onDateClick={
           onSlotCreate ??
-          (newDoc.enabled
+          (newDoc.enabled && rights.create
             ? (date) =>
                 navigator.navigate(
                   paths.newDoc(doctype, { [dateField]: toFrappeDateValue(date, dateFieldType) }),

package/src/views/DashboardView.screen.spec.tsx

@@ -0,0 +1,144 @@
+// The per-doctype dashboard (MPO-414): KPI counts over the rolling windows,
+// a card per status option that opens the pre-filtered list, the weekly
+// chart's empty state, and the desk scope ANDed into every query (GL-5).
+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 { DashboardView } from "./DashboardView";
+
+function dashboardMeta(name: string, withStatus = true) {
+  return {
+    name,
+    doctype: "DocType",
+    module: "QA",
+    title_field: "subject",
+    fields: [
+      { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+      ...(withStatus
+        ? [
+            {
+              fieldname: "status",
+              fieldtype: "Select",
+              label: "Status",
+              options: "Open\nWorking\nDone",
+              in_list_view: 1,
+            },
+          ]
+        : []),
+      { fieldname: "owner_name", fieldtype: "Data", label: "Owner", in_list_view: 1 },
+    ],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
+function daysAgo(days: number): string {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} 10:00:00`;
+}
+
+// bo's records are recent; ana's were created and last touched long ago.
+const docs = [
+  ["QAD-001", "Open", "bo", 2, 1],
+  ["QAD-002", "Working", "bo", 10, 3],
+  ["QAD-003", "Working", "bo", 40, 20],
+  ["QAD-004", "Done", "ana", 200, 150],
+  ["QAD-005", "Done", "ana", 300, 250],
+].map(([name, status, owner, created, modified]) => ({
+  name: String(name),
+  doctype: "QaDash",
+  subject: `Doc ${name}`,
+  status,
+  owner_name: owner,
+  creation: daysAgo(Number(created)),
+  modified: daysAgo(Number(modified)),
+}));
+
+let run = 0;
+
+function renderDashboard(doctype: string, scope?: FrappeFilters): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://dashboard-view-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({
+          DocType: [dashboardMeta("QaDash"), dashboardMeta("QaDashPlain", false)],
+          QaDash: docs,
+          QaDashPlain: docs.map((doc) => ({ ...doc, doctype: "QaDashPlain" })),
+        }),
+      }}
+      navigation={navigation}
+    >
+      <DeskScopeProvider scope={scope}>
+        <DashboardView doctype={doctype} />
+      </DeskScopeProvider>
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+async function kpi(title: string, value: string) {
+  await waitFor(
+    () => {
+      let node: HTMLElement | null = screen.getAllByText(title)[0] ?? null;
+      for (let depth = 0; node && depth < 6; depth += 1) {
+        const text = node.textContent ?? "";
+        if (text !== title && /\d/.test(text.replace(title, ""))) {
+          expect(text.replace(title, "").trim()).toBe(value);
+          return;
+        }
+        node = node.parentElement;
+      }
+      throw new Error(`no value drawn next to ${title}`);
+    },
+    { timeout: 5000 },
+  );
+}
+
+describe("<DashboardView />", () => {
+  it("counts the records in each rolling window", async () => {
+    renderDashboard("QaDash");
+    await kpi("Total QaDash", "5");
+    await kpi("Created (last 30 days)", "2");
+    await kpi("Modified (last 7 days)", "2");
+  });
+
+  it("draws a card per status option that opens the list filtered to it", async () => {
+    const navigation = renderDashboard("QaDash");
+    await kpi("Open", "1");
+    await kpi("Working", "2");
+    await kpi("Done", "2");
+    fireEvent.click(screen.getAllByText("Working")[0] as HTMLElement);
+    expect(navigation.getLocation().path).toBe("/backoffice/qadash");
+    expect(JSON.parse(String(navigation.getLocation().params.f))).toEqual([
+      ["status", "=", "Working"],
+    ]);
+  });
+
+  it("leaves the status cards and chart out for a doctype with no Select field", async () => {
+    renderDashboard("QaDashPlain");
+    await kpi("Total QaDashPlain", "5");
+    expect(screen.queryByText("Working")).toBeNull();
+    expect(screen.queryByText("By Status")).toBeNull();
+  });
+
+  it("ANDs the desk scope into the counts and both charts", async () => {
+    renderDashboard("QaDash", [["owner_name", "=", "ana"]]);
+    await kpi("Total QaDash", "2");
+    await kpi("Created (last 30 days)", "0");
+    await kpi("Done", "2");
+    await kpi("Working", "0");
+    expect(await screen.findByText("No recent activity", {}, { timeout: 5000 })).toBeTruthy();
+    await waitFor(() => expect(screen.getAllByText("Done")).toHaveLength(2), { timeout: 5000 });
+    expect(screen.getAllByText("Working")).toHaveLength(1);
+  });
+});

package/src/views/DashboardView.tsx

@@ -18,7 +18,7 @@ import {
   YStack,
 } from "@multiplatform.one/components";
 import { ChartCard, FrappeChartCard, FrappeKPICard } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
@@ -37,13 +37,32 @@ import { selectFieldOptions, useViewMeta } from "./viewMeta";
 import { ViewError, ViewLoading } from "./ViewStates";
 
 const CHART_HEIGHT = 220;
+const kpiColumnWidth = sizeRecipeEscape(
+  220,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const statusColumnWidth = sizeRecipeEscape(
+  180,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const chartColumnBasis = sizeRecipeEscape(
+  360,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const chartColumnMinWidth = sizeRecipeEscape(
+  300,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
 
 /** Card-shaped chart skeleton so the first load doesn't jump layout. */
 function ChartSkeletonCard({ height }: { height: number }) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   return (
     <Card aria-busy aria-label={t("views.loading", "Loading")}>
-      <Skeleton width="40%" height={16} />
+      <Skeleton
+        width="40%"
+        height={sizeRecipeEscape(16, "title bone: the height of the card title it stands in for")}
+      />
       <Skeleton variant="rounded" width="100%" height={height} />
     </Card>
   );
@@ -62,7 +81,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
   const paths = useBackofficePaths();
   const connection = useViewConnection();
   const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
-  const weekly = useWeeklyCreated(connection, doctype);
+  const weekly = useWeeklyCreated(connection, doctype, WEEKS_WINDOW, deskScope);
   // Rolling-window anchors resolve once per mount so the aggregate query
   // identities stay stable across re-renders (no refetch churn).
   const [anchors] = useState(() => ({
@@ -82,7 +101,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
     <ScrollView flex={1}>
       <YStack {...knobProps.panelPadding} {...knobProps.gap}>
         <XStack {...knobProps.gap} flexWrap="wrap">
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "total",
@@ -90,10 +109,10 @@ export function DashboardView({ doctype }: DashboardViewProps) {
                 value: 0,
                 format: "number",
               }}
-              dataSource={{ doctype }}
+              dataSource={{ doctype, ...(deskScope.length > 0 && { filters: deskScope }) }}
             />
           </YStack>
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "created-30d",
@@ -107,7 +126,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
               }}
             />
           </YStack>
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "modified-7d",
@@ -126,7 +145,12 @@ export function DashboardView({ doctype }: DashboardViewProps) {
         {statusField && statusOptions.length > 0 && (
           <XStack {...knobProps.gap} flexWrap="wrap">
             {statusOptions.map((option) => (
-              <YStack key={option} flexGrow={1} flexBasis={180} minWidth={180}>
+              <YStack
+                key={option}
+                flexGrow={1}
+                flexBasis={statusColumnWidth}
+                minWidth={statusColumnWidth}
+              >
                 <FrappeKPICard
                   config={{
                     id: `status-${option}`,
@@ -149,7 +173,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
         )}
 
         <XStack {...knobProps.gap} flexWrap="wrap">
-          <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+          <YStack flexGrow={1} flexBasis={chartColumnBasis} minWidth={chartColumnMinWidth}>
             {weekly.isLoading ? (
               <ChartSkeletonCard height={CHART_HEIGHT} />
             ) : weekly.error ? (
@@ -186,7 +210,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
             )}
           </YStack>
           {statusField && (
-            <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+            <YStack flexGrow={1} flexBasis={chartColumnBasis} minWidth={chartColumnMinWidth}>
               <FrappeChartCard
                 config={{
                   id: `by-${statusField.fieldname}`,
@@ -196,7 +220,11 @@ export function DashboardView({ doctype }: DashboardViewProps) {
                   type: "pie",
                   height: CHART_HEIGHT,
                 }}
-                dataSource={{ doctype, groupBy: statusField.fieldname }}
+                dataSource={{
+                  doctype,
+                  groupBy: statusField.fieldname,
+                  ...(deskScope.length > 0 && { filters: deskScope }),
+                }}
               />
             </YStack>
           )}

package/src/views/DoctypeViewScreen.stories.tsx

@@ -12,11 +12,17 @@
 // so an arm sets them by seeding the MemoryNavigator path.
 import { YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import type { BackofficeView } from "../navigation/paths";
 import { DoctypeViewScreen } from "./DoctypeViewScreen";
 
+const frameHeight = sizeRecipeEscape(
+  600,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/DoctypeViewScreen",
   component: DoctypeViewScreen,
@@ -212,7 +218,7 @@ function View({ doctype, view, path }: { doctype: string; view: BackofficeView;
       frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
       navigation={createMemoryNavigator(path ?? "/backoffice")}
     >
-      <YStack flex={1} height={600} minHeight={0}>
+      <YStack flex={1} height={frameHeight} minHeight={0}>
         <DoctypeViewScreen doctype={doctype} view={view} />
       </YStack>
     </BackofficeProvider>