@multiplatform.one/backoffice 6.4.3 → 6.7.0

package/src/shell/SlugScreen.tsx

@@ -0,0 +1,43 @@
+/**
+ * The "{base}/[slug]" surface: resolves a router slug to a workspace page
+ * or a doctype list at runtime (frappe's slugs are ambiguous by design).
+ * Route params stay in the host's route adapter — this screen takes plain
+ * props so it mounts outside any navigation container (stories/tests).
+ */
+import { EmptyState, Spinner, YStack } from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { DoctypeListScreen } from "../list/DoctypeListScreen";
+import { useSlugTarget } from "../shared/useSlugTarget";
+import { WorkspaceScreen } from "../workspace/WorkspaceScreen";
+
+export interface SlugScreenProps {
+  /** The raw route slug ("sales-order", "build", …). */
+  slug?: string;
+  /** The list `?f=` filters passthrough (JSON filter tuples). */
+  filtersParam?: string;
+  /** The list `?sort=` passthrough (`<fieldname>.<asc|desc>`). */
+  sortParam?: string;
+}
+
+export function SlugScreen({ slug, filtersParam, sortParam }: SlugScreenProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const target = useSlugTarget(slug);
+
+  if (target.status === "loading") {
+    return (
+      <YStack flex={1} alignItems="center" justifyContent="center">
+        <Spinner size="large" />
+      </YStack>
+    );
+  }
+  if (target.status === "not-found") {
+    return <EmptyState title={t("notFound", "Not found")} description={target.slug} />;
+  }
+  if (target.kind === "workspace") {
+    return <WorkspaceScreen workspace={target.workspace} />;
+  }
+  return (
+    <DoctypeListScreen doctype={target.doctype} filtersParam={filtersParam} sortParam={sortParam} />
+  );
+}

package/src/shell/useWorkspaces.spec.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+/**
+ * Workspace live-query teardown regression spec (backoffice-e2e-verify.md
+ * gap #3): navigating away from the shell (unmounting every useWorkspaces
+ * consumer) must wind the shared "Workspace" collection down WITHOUT
+ * erroring the live queries — the historical failure was the registry's
+ * grace GC calling collection.cleanup() while queries were still attached
+ * ("[Live Query Error] Source collection 'Workspace' was manually cleaned
+ * up while live query 'live-query-N' depends on it"), permanently erroring
+ * them and wedging remounts on "Loading workspaces…".
+ *
+ * The engine-level fix lives in public/frappe (subscriber-aware deferred
+ * GC — frappeReact.ts, spec'd there in frappeReactLiveQueryGc.spec.ts).
+ * THIS spec pins the consumer wiring: the real useWorkspaces hook over the
+ * real TanStack DB pipeline (fixture-backed SyncModule), through the full
+ * unmount → natural wind-down → remount cycle, asserting zero live-query
+ * errors and a clean reload. A regression in either layer (a manual
+ * cleanup() call, unstable collection identity churn in useWorkspaces, a
+ * broken loading gate) fails here.
+ */
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { FrappeProvider } from "@multiplatform.one/frappe-ui";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import { useWorkspaces } from "./useWorkspaces";
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    Workspace: [
+      {
+        name: "Home",
+        doctype: "Workspace",
+        title: "Home",
+        public: 1,
+        for_user: "",
+        sequence_id: 1,
+        parent_page: "",
+        is_hidden: 0,
+      },
+      {
+        name: "Users",
+        doctype: "Workspace",
+        title: "Users",
+        public: 1,
+        for_user: "",
+        sequence_id: 2,
+        parent_page: "",
+        is_hidden: 0,
+      },
+    ],
+  });
+
+describe("useWorkspaces teardown", () => {
+  let errorSpy: MockInstance;
+
+  const liveQueryErrors = () =>
+    errorSpy.mock.calls.filter(
+      (args) => typeof args[0] === "string" && args[0].includes("[Live Query Error]"),
+    );
+
+  beforeEach(() => {
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockRestore();
+  });
+
+  it(
+    "unmount → natural wind-down → remount: no live-query errors, data reloads",
+    { timeout: 20000 },
+    async () => {
+      // One provider instance across both mounts = one fixture SyncModule =
+      // the production shape (shared collection registry per connection).
+      const fixtures = makeFixtures();
+      const wrapper = ({ children }: { children: ReactNode }) => (
+        <FrappeProvider baseURL="http://workspace-teardown.fixtures.local" fixtures={fixtures}>
+          {children}
+        </FrappeProvider>
+      );
+
+      const first = renderHook(() => useWorkspaces(), { wrapper });
+      await waitFor(
+        () => {
+          expect(first.result.current.isLoading).toBe(false);
+          expect(first.result.current.workspaces.map((w) => w.name)).toEqual(["Home", "Users"]);
+        },
+        { timeout: 10000 },
+      );
+
+      // Navigate away: the last consumer unmounts. Let the FULL natural
+      // wind-down run on real timers — TanStack's live-query idle-detach
+      // (~1–2s) plus the registry's 1s grace GC ticks.
+      first.unmount();
+      await new Promise((resolve) => setTimeout(resolve, 3500));
+      expect(liveQueryErrors()).toHaveLength(0);
+
+      // Navigate back: the hook must come up clean (no permanently-errored
+      // query wedging the loading gate — the "Loading workspaces…" stick).
+      const second = renderHook(() => useWorkspaces(), { wrapper });
+      await waitFor(
+        () => {
+          expect(second.result.current.isLoading).toBe(false);
+          expect(second.result.current.workspaces.map((w) => w.name)).toEqual(["Home", "Users"]);
+        },
+        { timeout: 10000 },
+      );
+      expect(liveQueryErrors()).toHaveLength(0);
+
+      second.unmount();
+    },
+  );
+
+  it(
+    "quick route bounce (remount within the GC grace window) keeps the collection live",
+    { timeout: 20000 },
+    async () => {
+      const fixtures = makeFixtures();
+      const wrapper = ({ children }: { children: ReactNode }) => (
+        <FrappeProvider baseURL="http://workspace-bounce.fixtures.local" fixtures={fixtures}>
+          {children}
+        </FrappeProvider>
+      );
+
+      const first = renderHook(() => useWorkspaces(), { wrapper });
+      await waitFor(() => expect(first.result.current.isLoading).toBe(false), { timeout: 10000 });
+
+      // Bounce: unmount and remount well inside the 1s grace window (the
+      // list → form → list pattern of real shell navigation).
+      first.unmount();
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      const second = renderHook(() => useWorkspaces(), { wrapper });
+      await waitFor(
+        () => {
+          expect(second.result.current.isLoading).toBe(false);
+          expect(second.result.current.workspaces).toHaveLength(2);
+        },
+        { timeout: 10000 },
+      );
+
+      // Long dwell afterwards — deferred GC must never error the live query.
+      await new Promise((resolve) => setTimeout(resolve, 2500));
+      expect(liveQueryErrors()).toHaveLength(0);
+      expect(second.result.current.workspaces).toHaveLength(2);
+
+      second.unmount();
+    },
+  );
+});

package/src/views/CalendarView.tsx

@@ -0,0 +1,191 @@
+// Desk "calendar" view parity: date-field resolution follows desk order —
+// a `?field=` override, then the doctype's Calendar View settings doc
+// (subject/start/end fields), then start/end fieldname conventions, then
+// the first Date/Datetime field. A toolbar selector switches the date
+// field interactively (writes `?field=` so the choice is shareable).
+// Month/week/day switching, prev/today/next navigation, and drag-to-
+// reschedule come from FrappeCalendar, which rides a live collection —
+// external creates/updates/deletes re-slot events without a reload.
+// 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 { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeCapabilities,
+  useBackofficeNavigator,
+  useBackofficePaths,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { CalendarFieldSelector, calendarDateFieldCandidates } from "./calendar-field-selector";
+import { useViewConnection } from "./connection";
+import { useCalendarViewSettings } from "./deskViewConfigs";
+import { detectDateFields, useViewMeta, type AnyDoc } from "./viewMeta";
+import { ViewError, ViewLoading, ViewUnsupported } from "./ViewStates";
+
+// The `one` compiler breaks explicit JSX generics — instantiate once.
+const CalendarOfDoc = FrappeCalendar as (props: FrappeCalendarProps<AnyDoc>) => ReactElement;
+
+/**
+ * Serialize a clicked calendar date the way frappe stores the target field:
+ * Datetime → "YYYY-MM-DD HH:mm:ss", Date → "YYYY-MM-DD" — local time, the
+ * same convention FrappeCalendar uses when persisting drag-moves.
+ */
+function toFrappeDateValue(date: Date, fieldtype: string | undefined): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const datePart = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  if (fieldtype !== "Datetime") return datePart;
+  return `${datePart} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+
+export interface CalendarViewProps {
+  /** Proper-cased doctype name (e.g. "ToDo", "Sales Order") */
+  doctype: string;
+  /** Date field override (`?field=` search param). */
+  dateField?: string;
+  /**
+   * Called when the user picks a date field in the selector. Defaults to
+   * writing the `?field=` search param (replace navigation), which
+   * round-trips through the view dispatcher (DoctypeViewScreen) back into
+   * the `dateField` prop.
+   */
+  onDateFieldChange?: (fieldname: string) => void;
+  /**
+   * Day/slot-click override. Default: start a new document prefilled with
+   * the clicked date (`?d=` param on the /new route) — gated by the
+   * `newDoc` capability.
+   */
+  onSlotCreate?: (date: Date) => void;
+}
+
+export function CalendarView({
+  doctype,
+  dateField: fieldOverride,
+  onDateFieldChange,
+  onSlotCreate,
+}: CalendarViewProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { newDoc } = useBackofficeCapabilities();
+  const { knobProps } = useResolvedKnobs();
+  const connection = useViewConnection();
+  const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
+  const settings = useCalendarViewSettings(connection, doctype);
+
+  if (isMetaLoading || settings.isLoading) return <ViewLoading />;
+  if (metaError && !meta) return <ViewError doctype={doctype} error={metaError} />;
+  if (!meta) return <ViewLoading />;
+
+  // Resolution order: override → Calendar View doc → conventions/first.
+  // Every candidate is validated against the meta's Date/Datetime fields
+  // via detectDateFields (an invalid candidate falls through).
+  const candidates = calendarDateFieldCandidates(meta);
+  const candidateNames = new Set(candidates.map((field) => field.fieldname));
+  const settingsDoc = settings.doc;
+  const detected = detectDateFields(meta, fieldOverride ?? settingsDoc?.start_date_field);
+  const dateField = detected.dateField;
+  // The settings' end field only pairs with the settings' start field — an
+  // overridden start keeps convention pairing (starts_on → ends_on, …)
+  // instead of mixing a range across two different field pairs.
+  const endDateField =
+    dateField === settingsDoc?.start_date_field &&
+    settingsDoc?.end_date_field &&
+    candidateNames.has(settingsDoc.end_date_field)
+      ? settingsDoc.end_date_field
+      : detected.endDateField;
+
+  if (!dateField) {
+    return (
+      <ViewUnsupported
+        doctype={doctype}
+        title={t("views.calendarUnsupported", "Calendar not available")}
+        description={t(
+          "views.calendarUnsupportedDetail",
+          "{{doctype}} has no date field to place on a calendar.",
+          { doctype },
+        )}
+      />
+    );
+  }
+
+  // Settings' subject field must exist on the doctype — a stale settings doc
+  // must not leak an unknown column into the fields list (the list endpoint
+  // rejects the whole query on unknown fields).
+  const subjectField =
+    settingsDoc?.subject_field && meta.fields.some((f) => f.fieldname === settingsDoc.subject_field)
+      ? settingsDoc.subject_field
+      : undefined;
+  const titleField = subjectField ?? meta.title_field ?? undefined;
+  // Desk colors event chips by the doc's Color field when one exists
+  // (e.g. Event.color); FrappeCalendar computes readable chip text per fill.
+  const colorField = meta.fields.find((f) => f.fieldtype === "Color" && !f.hidden)?.fieldname;
+  // Date vs Datetime decides the prefill serialization on day/slot clicks.
+  const dateFieldType = meta.fields.find((f) => f.fieldname === dateField)?.fieldtype;
+  const fields = Array.from(
+    new Set([
+      "name",
+      dateField,
+      ...(endDateField ? [endDateField] : []),
+      ...(titleField ? [titleField] : []),
+      ...(colorField ? [colorField] : []),
+    ]),
+  ) as readonly (keyof AnyDoc & string)[];
+
+  return (
+    <YStack flex={1} {...knobProps.gap}>
+      {candidates.length > 1 && (
+        <XStack {...knobProps.panelPadding} paddingBottom={0} justifyContent="flex-end">
+          <CalendarFieldSelector
+            candidates={candidates}
+            value={dateField}
+            onChange={(fieldname) => {
+              if (onDateFieldChange) onDateFieldChange(fieldname);
+              else {
+                // Router-free `setParams` equivalent: replace to the same
+                // view with `?field=` so the choice stays shareable without
+                // growing history.
+                navigator.replace(
+                  `${paths.view(doctype, "calendar")}?field=${encodeURIComponent(fieldname)}`,
+                );
+              }
+            }}
+          />
+        </XStack>
+      )}
+      <CalendarOfDoc
+        // Remount on axis change: a fresh collection subscribes with the new
+        // date field in its field list (no stale rows missing the column).
+        key={dateField}
+        doctype={doctype}
+        dateField={dateField}
+        endDateField={endDateField}
+        titleField={titleField}
+        colorField={colorField}
+        fields={fields}
+        defaultView="month"
+        showNavigation
+        showViewSwitcher
+        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`.
+        onDateClick={
+          onSlotCreate ??
+          (newDoc.enabled
+            ? (date) =>
+                navigator.navigate(
+                  paths.newDoc(doctype, { [dateField]: toFrappeDateValue(date, dateFieldType) }),
+                )
+            : undefined)
+        }
+        error={(err) => <ViewError doctype={doctype} error={err} />}
+      />
+    </YStack>
+  );
+}

package/src/views/DashboardView.tsx

@@ -0,0 +1,205 @@
+// Desk "dashboard" view (/app/<doctype>/view/dashboard parity): a compact
+// per-doctype dashboard —
+//   - live KPI row (total, created last 30d, modified last 7d) via
+//     FrappeKPICard's server-side aggregates (realtime-refetched)
+//   - per-status KPI cards when the doctype has a status Select (one card
+//     per option; clicking opens the list pre-filtered via `?f=`)
+//   - "created per week" bar chart over the last 12 weeks (per-day server
+//     aggregate bucketed into weeks — see dashboard-data.tsx)
+//   - status distribution donut (FrappeChartCard + useFrappeAggregate
+//     groupBy) when a status field exists
+// Every card carries honest loading / error / empty states.
+import {
+  AsyncBoundary,
+  Card,
+  ScrollView,
+  Skeleton,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { ChartCard, FrappeChartCard, FrappeKPICard } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { useViewConnection } from "./connection";
+import {
+  MAX_STATUS_KPI_CARDS,
+  WEEKS_WINDOW,
+  daysAgoIso,
+  detectStatusField,
+  filteredListHref,
+  useWeeklyCreated,
+} from "./dashboard-data";
+import { selectFieldOptions, useViewMeta } from "./viewMeta";
+import { ViewError, ViewLoading } from "./ViewStates";
+
+const CHART_HEIGHT = 220;
+
+/** 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 variant="rounded" width="100%" height={height} />
+    </Card>
+  );
+}
+
+export interface DashboardViewProps {
+  /** Proper-cased doctype name (e.g. "ToDo", "Sales Order") */
+  doctype: string;
+}
+
+export function DashboardView({ doctype }: DashboardViewProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const connection = useViewConnection();
+  const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
+  const weekly = useWeeklyCreated(connection, doctype);
+  // Rolling-window anchors resolve once per mount so the aggregate query
+  // identities stay stable across re-renders (no refetch churn).
+  const [anchors] = useState(() => ({
+    createdSince: daysAgoIso(30),
+    modifiedSince: daysAgoIso(7),
+  }));
+
+  if (isMetaLoading) return <ViewLoading />;
+  if (metaError && !meta) return <ViewError doctype={doctype} error={metaError} />;
+
+  const statusField = meta ? detectStatusField(meta) : undefined;
+  const statusOptions = statusField
+    ? selectFieldOptions(statusField).slice(0, MAX_STATUS_KPI_CARDS)
+    : [];
+
+  return (
+    <ScrollView flex={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+        <XStack {...knobProps.gap} flexWrap="wrap">
+          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+            <FrappeKPICard
+              config={{
+                id: "total",
+                title: t("views.kpiTotal", "Total {{doctype}}", { doctype }),
+                value: 0,
+                format: "number",
+              }}
+              dataSource={{ doctype }}
+            />
+          </YStack>
+          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+            <FrappeKPICard
+              config={{
+                id: "created-30d",
+                title: t("views.kpiCreated30d", "Created (last 30 days)"),
+                value: 0,
+                format: "number",
+              }}
+              dataSource={{
+                doctype,
+                filters: [["creation", ">=", anchors.createdSince]],
+              }}
+            />
+          </YStack>
+          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+            <FrappeKPICard
+              config={{
+                id: "modified-7d",
+                title: t("views.kpiModified7d", "Modified (last 7 days)"),
+                value: 0,
+                format: "number",
+              }}
+              dataSource={{
+                doctype,
+                filters: [["modified", ">=", anchors.modifiedSince]],
+              }}
+            />
+          </YStack>
+        </XStack>
+
+        {statusField && statusOptions.length > 0 && (
+          <XStack {...knobProps.gap} flexWrap="wrap">
+            {statusOptions.map((option) => (
+              <YStack key={option} flexGrow={1} flexBasis={180} minWidth={180}>
+                <FrappeKPICard
+                  config={{
+                    id: `status-${option}`,
+                    title: option,
+                    value: 0,
+                    format: "number",
+                    onClick: () =>
+                      navigator.navigate(
+                        filteredListHref(doctype, statusField.fieldname, option, paths),
+                      ),
+                  }}
+                  dataSource={{
+                    doctype,
+                    filters: [[statusField.fieldname, "=", option]],
+                  }}
+                />
+              </YStack>
+            ))}
+          </XStack>
+        )}
+
+        <XStack {...knobProps.gap} flexWrap="wrap">
+          <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+            {weekly.isLoading ? (
+              <ChartSkeletonCard height={CHART_HEIGHT} />
+            ) : weekly.error ? (
+              <AsyncBoundary
+                compact
+                error={weekly.error}
+                errorTitle={t("views.weeklyChartFailed", "Couldn't load weekly activity")}
+                onRetry={weekly.refresh}
+              />
+            ) : weekly.isEmpty ? (
+              <AsyncBoundary
+                compact
+                empty
+                emptyTitle={t("views.weeklyChartEmpty", "No recent activity")}
+                emptyDescription={t(
+                  "views.weeklyChartEmptyDetail",
+                  "Nothing was created in the last {{weeks}} weeks",
+                  { weeks: WEEKS_WINDOW },
+                )}
+              />
+            ) : (
+              <ChartCard
+                // Subtle stale affordance: dim while a post-event refetch runs.
+                opacity={weekly.isStale ? 0.6 : 1}
+                aria-busy={weekly.isStale || undefined}
+                config={{
+                  id: "created-per-week",
+                  title: t("views.createdPerWeek", "Created per week"),
+                  type: "bar",
+                  data: weekly.data ?? [],
+                  height: CHART_HEIGHT,
+                }}
+              />
+            )}
+          </YStack>
+          {statusField && (
+            <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+              <FrappeChartCard
+                config={{
+                  id: `by-${statusField.fieldname}`,
+                  title: t("views.bySelectField", "By {{field}}", {
+                    field: statusField.label || statusField.fieldname,
+                  }),
+                  type: "pie",
+                  height: CHART_HEIGHT,
+                }}
+                dataSource={{ doctype, groupBy: statusField.fieldname }}
+              />
+            </YStack>
+          )}
+        </XStack>
+      </YStack>
+    </ScrollView>
+  );
+}

package/src/views/DoctypeViewScreen.tsx

@@ -0,0 +1,84 @@
+// Contract: alternate doctype views (report, kanban, calendar, tree, image,
+// dashboard) dispatched by `view`. Every view shares the ViewHeader (title,
+// view switcher across all backoffice views, New button) and honest
+// loading / error / unsupported states with a way back to the list.
+//
+// Search-param overrides (desk parity):
+//   ?board=<Kanban Board name>  — kanban board selection
+//   ?field=<fieldname>          — calendar date field
+//   ?f=<urlencoded JSON>        — report base filters
+// Search params are read HERE (via the navigator's subscribable location),
+// never in the leaf view screens, so each view can mount outside a One
+// navigation container (stories/tests).
+import { YStack } from "@multiplatform.one/components";
+import { useEffect } from "react";
+import {
+  useBackofficeLocation,
+  useBackofficeNavigator,
+  useBackofficePaths,
+} from "../config/BackofficeProvider";
+import type { BackofficeView } from "../navigation/paths";
+import { CalendarView } from "./CalendarView";
+import { DashboardView } from "./DashboardView";
+import { ImageView } from "./ImageView";
+import { KanbanView } from "./KanbanView";
+// Report workstream: view=report mounts the desk-parity report surface from
+// report/ (default columns, per-column filter row, saved reports). The old
+// views/ReportView stays exported for compatibility.
+import { DoctypeReportView as ReportView } from "../report/DoctypeReportView";
+import { TreeView } from "./TreeView";
+import { ViewHeader } from "./ViewHeader";
+import { ViewLoading } from "./ViewStates";
+
+export interface DoctypeViewScreenProps {
+  /** Proper-cased doctype name (e.g. "ToDo", "Sales Order") */
+  doctype: string;
+  view: BackofficeView;
+}
+
+/**
+ * "list" is owned by the list route (/backoffice/[slug]) — a deep link to
+ * /view/list bounces there. `replace` keeps Back working (the /view/list
+ * URL never enters history); the effect is client-only so SSR just paints
+ * the loading state.
+ */
+function ListRedirect({ doctype }: { doctype: string }) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  useEffect(() => {
+    navigator.replace(paths.list(doctype));
+  }, [navigator, paths, doctype]);
+  return <ViewLoading />;
+}
+
+function ViewBody({ doctype, view }: { doctype: string; view: Exclude<BackofficeView, "list"> }) {
+  const { params } = useBackofficeLocation();
+  const board = typeof params.board === "string" ? params.board : undefined;
+  const field = typeof params.field === "string" ? params.field : undefined;
+  const filtersParam = typeof params.f === "string" ? params.f : params.f?.[0];
+
+  switch (view) {
+    case "report":
+      return <ReportView doctype={doctype} filtersParam={filtersParam} />;
+    case "kanban":
+      return <KanbanView doctype={doctype} board={board} />;
+    case "calendar":
+      return <CalendarView doctype={doctype} dateField={field} />;
+    case "tree":
+      return <TreeView doctype={doctype} />;
+    case "image":
+      return <ImageView doctype={doctype} />;
+    case "dashboard":
+      return <DashboardView doctype={doctype} />;
+  }
+}
+
+export function DoctypeViewScreen({ doctype, view }: DoctypeViewScreenProps) {
+  if (view === "list") return <ListRedirect doctype={doctype} />;
+  return (
+    <YStack flex={1}>
+      <ViewHeader doctype={doctype} view={view} />
+      <ViewBody doctype={doctype} view={view} />
+    </YStack>
+  );
+}