@multiplatform.one/frappe-ui 7.28.0 → 7.29.0

package/dist/esm/FrappeReportBuilder.mjs

@@ -1,61 +1,165 @@
-import { useDocTypeMeta, useFrappeDoctypeEvents } from "@multiplatform.one/frappe";
+import { BarChart, EmptyState, ScrollView, Spinner, YStack, isWeb, notify } from "@multiplatform.one/components";
+import { Order, frappeFieldTypes, useDocTypeMeta } from "@multiplatform.one/frappe";
+import { Button } from "@multiplatform.one/forms";
 import { downloadBlob } from "@multiplatform.one/platform";
-import { ReportBuilder, PopoverContent, Separator } from "@multiplatform.one/components";
-import { Button, Input, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import { storage } from "@multiplatform.one/store";
-import { useMemo, useState, useCallback, useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Popover, Text, XStack, YStack } from "tamagui";
-import { FloppyDiskIcon, FolderOpenIcon, TrashIcon } from "@phosphor-icons/react";
+import { DataTablePagination } from "@multiplatform.one/table";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FrappeNotConfigured } from "./FrappeNotConfigured.mjs";
 import { useFrappeConfig } from "./FrappeProvider.mjs";
+import { isPermissionError, refusalReason } from "./liveErrors.mjs";
+import { recordKeyLabel, useRecordShape } from "./recordShape.mjs";
+import { ReportGrid } from "./report/ReportGrid.mjs";
+import { ReportViewToolbar } from "./report/ReportViewToolbar.mjs";
+import { DEFAULT_REPORT_PAGE_SIZE, REPORT_PAGE_SIZES, buildGridRows, buildReportCsv, columnFilterTuples, computeTotals, defaultReportFieldnames, orderReportRows, reportColumnsFromMeta, resolveSelectedColumns } from "./report/reportViewModel.mjs";
+import { useSavedReports } from "./report/savedReports.mjs";
 import { useFrappeRows } from "./useFrappeRows.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-function getSavedReportsKey(doctype) {
-  return `frappe-report-${doctype}`;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const EMPTY_FILTERS = [];
+const COLUMN_FILTER_DEBOUNCE_MS = 350;
+function columnsStorageKey(doctype) {
+  return `backoffice.report.columns.${doctype}`;
 }
-async function loadSavedReports(doctype) {
+async function readStoredColumns(doctype) {
   try {
-    const raw = await Promise.resolve(storage.getItem(getSavedReportsKey(doctype)));
-    if (raw) return JSON.parse(raw);
+    const raw = await Promise.resolve(storage.getItem(columnsStorageKey(doctype)));
+    if (!raw) return void 0;
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed) && parsed.every(entry => typeof entry === "string")) {
+      return parsed;
+    }
   } catch {}
-  return [];
+  return void 0;
 }
-async function persistSavedReports(doctype, reports) {
+function persistStoredColumns(doctype, fieldnames) {
   try {
-    await Promise.resolve(storage.setItem(getSavedReportsKey(doctype), JSON.stringify(reports)));
+    void Promise.resolve(storage.setItem(columnsStorageKey(doctype), JSON.stringify(fieldnames)));
   } catch {}
 }
+function toReportFilters(filters) {
+  if (!filters) return void 0;
+  if (Array.isArray(filters)) return filters.length > 0 ? filters : void 0;
+  const tuples = Object.entries(filters).map(([field, value]) => [field, "=", value]);
+  return tuples.length > 0 ? tuples : void 0;
+}
+function initialFieldnames(columns) {
+  if (!columns) return null;
+  const fieldnames = columns.flatMap(column => typeof column === "string" ? [column] : column.enabled ? [column.fieldname] : []);
+  return fieldnames.length > 0 ? fieldnames : null;
+}
+function asFieldType(fieldtype) {
+  return frappeFieldTypes.find(known => known === fieldtype) ?? "Data";
+}
+function refusedMetaFields(initialColumns, recordFields) {
+  const declared = (initialColumns ?? []).map(column => typeof column === "string" ? {
+    fieldname: column,
+    label: recordKeyLabel(column),
+    fieldtype: "Data"
+  } : {
+    fieldname: column.fieldname,
+    label: column.label,
+    fieldtype: asFieldType(column.fieldtype)
+  });
+  return (declared.length > 0 ? declared : recordFields ?? []).filter(field => field.fieldname !== "name").map(field => ({
+    ...field,
+    read_only: 1,
+    in_list_view: 1
+  }));
+}
+function asError(error) {
+  return error instanceof Error ? error : new Error(String(error));
+}
+function groupField(groupBy) {
+  if (!groupBy) return null;
+  return typeof groupBy === "string" ? groupBy : groupBy.field;
+}
+function aggregateGroups(rows, field, config) {
+  const groups = /* @__PURE__ */new Map();
+  for (const row of rows) {
+    const key = row[field] === null || row[field] === void 0 ? "" : String(row[field]);
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(row);else groups.set(key, [row]);
+  }
+  const numbers = group => group.map(row => Number(config?.aggregationField ? row[config.aggregationField] : 0) || 0);
+  return [...groups.entries()].map(([label, group]) => {
+    switch (config?.aggregationField ? config.aggregation : "count") {
+      case "sum":
+        return {
+          label,
+          value: numbers(group).reduce((sum, value) => sum + value, 0)
+        };
+      case "avg":
+        return {
+          label,
+          value: numbers(group).reduce((sum, value) => sum + value, 0) / group.length
+        };
+      case "min":
+        return {
+          label,
+          value: Math.min(...numbers(group))
+        };
+      case "max":
+        return {
+          label,
+          value: Math.max(...numbers(group))
+        };
+      default:
+        return {
+          label,
+          value: group.length
+        };
+    }
+  });
+}
 function canDownloadCsv() {
   return typeof document !== "undefined" && typeof document.createElement === "function" && typeof Blob !== "undefined" && typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
 }
-function FrappeReportBuilder({
+function FrappeReportBuilder(props) {
+  const config = useFrappeConfig();
+  if (!(props.baseURL ?? config?.baseURL) && !config?.fixtures) {
+    return /* @__PURE__ */jsx(FrappeNotConfigured, {
+      doctype: props.doctype
+    });
+  }
+  return /* @__PURE__ */jsx(FrappeReportBuilderBody, {
+    ...props
+  });
+}
+function FrappeReportBuilderBody({
   doctype,
+  filters,
+  scopeFilters,
+  onClearFilters,
   initialColumns,
   initialGroupBy,
-  filters,
   showChart = false,
-  onExport,
+  onOpenRow,
   onRowPress,
+  onOpenLink,
+  report: reportProp,
+  onReportChange,
+  onExport,
+  loading: loadingFallback,
+  error: errorFallback,
   baseURL,
   auth,
   syncOptions,
   ...stackProps
 }) {
-  const config = useFrappeConfig();
-  const {
-    knobProps
-  } = useResolvedKnobs();
   const {
     t
   } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const config = useFrappeConfig();
   const finalBaseURL = baseURL ?? config?.baseURL;
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
-  if (!finalBaseURL && !config?.fixtures) {
-    throw new Error("FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL or fixtures");
-  }
-  const connectionConfig = {
+  const fixtureMode = Boolean(config?.fixtures);
+  const connection = useMemo(() => ({
     baseURL: finalBaseURL,
     socketPort: config?.socketPort,
     siteName: config?.siteName,
@@ -64,331 +168,441 @@ function FrappeReportBuilder({
     syncOptions: finalSyncOptions,
     realtime: config?.realtime,
     fixtures: config?.fixtures
-  };
+  }), [finalBaseURL, config?.socketPort, config?.siteName, config?.socketBaseURL, finalAuth, finalSyncOptions, config?.realtime, config?.fixtures]);
   const {
     meta,
-    isLoading: isMetaLoading,
+    isLoading: metaLoading,
     error: metaError
-  } = useDocTypeMeta(connectionConfig, doctype);
+  } = useDocTypeMeta(connection, doctype);
+  const metaRefused = !meta && metaError !== void 0 && isPermissionError(metaError);
+  const initialColumnsJson = JSON.stringify(initialColumns ?? []);
+  const declaresColumns = initialColumnsJson !== "[]";
+  const recordShape = useRecordShape(connection, doctype, metaRefused && !declaresColumns);
+  const layoutMeta = useMemo(() => {
+    if (meta) return meta;
+    if (!metaRefused) return void 0;
+    const fields = refusedMetaFields(JSON.parse(initialColumnsJson), recordShape.fields);
+    return fields.length > 0 ? {
+      fields
+    } : void 0;
+  }, [meta, metaRefused, initialColumnsJson, recordShape.fields]);
+  const readsWithoutMeta = !meta && layoutMeta !== void 0;
+  const savedReports = useSavedReports(doctype, useMemo(() => ({
+    baseURL: metaRefused ? "" : connection.baseURL ?? "",
+    auth: connection.auth,
+    fixtures: connection.fixtures
+  }), [metaRefused, connection.baseURL, connection.auth, connection.fixtures]));
+  const [internalReport, setInternalReport] = useState(null);
+  const currentReport = reportProp !== void 0 ? reportProp : internalReport;
   const allColumns = useMemo(() => {
-    if (initialColumns) return initialColumns;
-    if (!meta) return [];
-    return meta.fields.filter(f => f.fieldtype !== "Section Break" && f.fieldtype !== "Column Break" && f.fieldtype !== "Tab Break").map(f => ({
-      fieldname: f.fieldname,
-      label: f.label || f.fieldname,
-      fieldtype: f.fieldtype,
-      enabled: !!f.in_list_view
-    }));
-  }, [initialColumns, meta]);
-  const fetchFields = useMemo(() => {
-    const fieldNames = allColumns.map(c => c.fieldname);
-    if (!fieldNames.includes("name")) {
-      fieldNames.unshift("name");
-    }
-    return fieldNames;
-  }, [allColumns]);
-  const {
-    rows,
-    isQueryLoading: isLoading,
-    isError
-  } = useFrappeRows(connectionConfig, doctype, {
-    fields: fetchFields,
-    filters,
-    limit: null
-  });
-  const data = rows;
-  const [isLiveStale, setIsLiveStale] = useState(false);
-  const staleTimerRef = useRef(void 0);
-  const clearStaleTimer = useCallback(() => {
-    if (staleTimerRef.current) {
-      clearTimeout(staleTimerRef.current);
-      staleTimerRef.current = void 0;
-    }
-  }, []);
-  useFrappeDoctypeEvents(connectionConfig, doctype, event => {
-    if (event.type !== "doc_update" && event.type !== "list_update" && event.type !== "doc_deleted" && event.type !== "doc_changed") {
-      return;
-    }
-    setIsLiveStale(true);
-    clearStaleTimer();
-    staleTimerRef.current = setTimeout(() => setIsLiveStale(false), 2500);
-  });
-  const isFirstData = useRef(true);
+    const columns = reportColumnsFromMeta(layoutMeta);
+    if (!readsWithoutMeta || !layoutMeta) return columns;
+    const own = new Set(layoutMeta.fields.map(field => field.fieldname));
+    return columns.filter(column => column.fieldname === "name" || own.has(column.fieldname));
+  }, [layoutMeta, readsWithoutMeta]);
+  const defaultFieldnames = useMemo(() => readsWithoutMeta && layoutMeta ? ["name", ...layoutMeta.fields.map(field => field.fieldname)] : defaultReportFieldnames(layoutMeta), [layoutMeta, readsWithoutMeta]);
+  const initialColumnsKey = JSON.stringify(initialFieldnames(initialColumns));
+  const startFieldnames = useMemo(() => JSON.parse(initialColumnsKey), [initialColumnsKey]);
+  const [storedColumns, setStoredColumns] = useState(void 0);
+  const [selectedOverride, setSelectedOverride] = useState(null);
   useEffect(() => {
-    if (isFirstData.current) {
-      isFirstData.current = false;
-      return;
-    }
-    setIsLiveStale(false);
-    clearStaleTimer();
-  }, [data, clearStaleTimer]);
-  useEffect(() => clearStaleTimer, [clearStaleTimer]);
-  const [groupBy, setGroupBy] = useState(initialGroupBy ?? null);
-  const [enabledColumns, setEnabledColumns] = useState([]);
+    if (fixtureMode) return;
+    let cancelled = false;
+    void readStoredColumns(doctype).then(stored => {
+      if (!cancelled) setStoredColumns(stored);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [doctype, fixtureMode]);
+  const selectedFieldnames = selectedOverride ?? startFieldnames ?? storedColumns ?? defaultFieldnames;
+  const selectedColumns = useMemo(() => resolveSelectedColumns(allColumns, selectedFieldnames), [allColumns, selectedFieldnames]);
+  const filtersKey = JSON.stringify(filters ?? null);
+  const propFilters = useMemo(() => toReportFilters(JSON.parse(filtersKey)), [filtersKey]);
+  const [filtersCleared, setFiltersCleared] = useState(false);
+  const [reportFilters, setReportFilters] = useState(null);
+  const baseFilters = filtersCleared ? EMPTY_FILTERS : reportFilters ?? propFilters ?? EMPTY_FILTERS;
+  const [filterDrafts, setFilterDrafts] = useState({});
+  const [committedFilters, setCommittedFilters] = useState({});
   useEffect(() => {
-    if (allColumns.length > 0 && enabledColumns.length === 0) {
-      const initial = allColumns.filter(c => c.enabled).map(c => c.fieldname);
-      if (initial.length === 0) {
-        setEnabledColumns(allColumns.slice(0, 5).map(c => c.fieldname));
-      } else {
-        setEnabledColumns(initial);
-      }
-    }
-  }, [allColumns, enabledColumns.length]);
-  const [savedReports, setSavedReports] = useState([]);
-  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
-  const [saveReportName, setSaveReportName] = useState("");
+    const handle = setTimeout(() => {
+      setCommittedFilters(previous => JSON.stringify(previous) === JSON.stringify(filterDrafts) ? previous : filterDrafts);
+    }, COLUMN_FILTER_DEBOUNCE_MS);
+    return () => clearTimeout(handle);
+  }, [filterDrafts]);
+  const columnTuples = useMemo(() => columnFilterTuples(selectedColumns, committedFilters), [selectedColumns, committedFilters]);
+  const scopeKey = JSON.stringify(scopeFilters ?? []);
+  const scope = useMemo(() => JSON.parse(scopeKey), [scopeKey]);
+  const effectiveFilters = useMemo(() => [...scope, ...baseFilters, ...columnTuples], [scope, baseFilters, columnTuples]);
+  const metaSort = useMemo(() => ({
+    field: (meta?.sort_field || "modified").split(" ")[0],
+    order: (meta?.sort_order || "DESC").toLowerCase() === "asc" ? "asc" : "desc"
+  }), [meta?.sort_field, meta?.sort_order]);
+  const [sortOverride, setSortOverride] = useState(null);
+  const sort = sortOverride ?? metaSort;
+  const startGroupBy = groupField(initialGroupBy);
+  const chartConfig = typeof initialGroupBy === "object" ? initialGroupBy : void 0;
+  const [groupBy, setGroupBy] = useState(startGroupBy);
+  const [pageSize, setPageSize] = useState(DEFAULT_REPORT_PAGE_SIZE);
+  const [page, setPage] = useState(0);
+  useEffect(() => {
+    setSelectedOverride(null);
+    setStoredColumns(void 0);
+    setSortOverride(null);
+    setGroupBy(startGroupBy);
+    setPage(0);
+    setPageSize(DEFAULT_REPORT_PAGE_SIZE);
+    setFilterDrafts({});
+    setCommittedFilters({});
+    setFiltersCleared(false);
+    setReportFilters(null);
+  }, [doctype]);
+  useEffect(() => setFiltersCleared(false), [filtersKey]);
+  const effectiveFiltersKey = useMemo(() => JSON.stringify(effectiveFilters), [effectiveFilters]);
+  useEffect(() => {
+    setPage(0);
+  }, [effectiveFiltersKey, pageSize, groupBy]);
   useEffect(() => {
+    if (!currentReport) {
+      setReportFilters(null);
+      return;
+    }
     let cancelled = false;
-    void (async () => {
-      const reports = await loadSavedReports(doctype);
-      if (!cancelled) {
-        setSavedReports(reports);
+    void savedReports.load(currentReport).then(saved => {
+      if (cancelled || !saved) return;
+      setSelectedOverride(saved.fieldnames.length > 0 ? saved.fieldnames : null);
+      setReportFilters(saved.filters);
+      setFilterDrafts({});
+      setCommittedFilters({});
+      setFiltersCleared(false);
+      if (saved.sort) setSortOverride(saved.sort);
+      if (saved.pageSize && REPORT_PAGE_SIZES.some(size => size === saved.pageSize)) {
+        setPageSize(saved.pageSize);
       }
-    })();
+      setGroupBy(saved.groupBy ?? null);
+    });
     return () => {
       cancelled = true;
     };
-  }, [doctype]);
-  const handleSaveReport = useCallback(() => {
-    if (!saveReportName.trim()) return;
-    const report = {
-      name: saveReportName.trim(),
-      columns: enabledColumns,
+  }, [currentReport, doctype]);
+  const handleToggleColumn = useCallback(fieldname => {
+    setSelectedOverride(previous => {
+      const current = previous ?? startFieldnames ?? storedColumns ?? defaultFieldnames;
+      const next = current.includes(fieldname) ? current.length === 1 ? current : current.filter(entry => entry !== fieldname) : [...current, fieldname];
+      if (!fixtureMode && !currentReport) persistStoredColumns(doctype, next);
+      return next;
+    });
+  }, [startFieldnames, storedColumns, defaultFieldnames, fixtureMode, currentReport, doctype]);
+  const handleResetColumns = useCallback(() => {
+    setSelectedOverride(defaultFieldnames);
+    setStoredColumns(void 0);
+    if (!fixtureMode) persistStoredColumns(doctype, defaultFieldnames);
+  }, [defaultFieldnames, fixtureMode, doctype]);
+  const fetchFields = useMemo(() => {
+    const fields = /* @__PURE__ */new Set(["name", sort.field]);
+    for (const column of selectedColumns) fields.add(column.fieldname);
+    if (groupBy) fields.add(groupBy);
+    if (chartConfig?.aggregationField) fields.add(chartConfig.aggregationField);
+    return [...fields];
+  }, [selectedColumns, sort.field, groupBy, chartConfig?.aggregationField]);
+  const orderBy = useMemo(() => [{
+    field: sort.field,
+    order: sort.order === "asc" ? Order.Asc : Order.Desc
+  }], [sort.field, sort.order]);
+  const {
+    rows: rowsData,
+    syncError,
+    isLoading: rowsLoading
+  } = useFrappeRows(connection, doctype, {
+    fields: fetchFields,
+    filters: effectiveFilters,
+    orderBy,
+    limit: null,
+    enabled: layoutMeta !== void 0,
+    mapError: asError
+  });
+  const orderedRows = useMemo(() => orderReportRows(rowsData, sort, groupBy), [rowsData, sort, groupBy]);
+  const total = orderedRows.length;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const effectivePage = Math.min(page, pageCount - 1);
+  const gridRows = useMemo(() => buildGridRows(orderedRows, effectivePage * pageSize, pageSize, groupBy), [orderedRows, effectivePage, pageSize, groupBy]);
+  const totals = useMemo(() => computeTotals(selectedColumns, orderedRows), [selectedColumns, orderedRows]);
+  const groupByColumn = groupBy ? allColumns.find(column => column.fieldname === groupBy) : void 0;
+  const chartData = useMemo(() => showChart && groupBy ? aggregateGroups(orderedRows, groupBy, chartConfig) : [], [showChart, groupBy, orderedRows, chartConfig]);
+  const rowsPressable = Boolean(onOpenRow || onRowPress);
+  const handleOpenRow = useCallback(name => {
+    onOpenRow?.(name);
+    if (onRowPress) {
+      const index = orderedRows.findIndex(row => row.name === name);
+      if (index >= 0) onRowPress(orderedRows[index], index);
+    }
+  }, [onOpenRow, onRowPress, orderedRows]);
+  const handleSelectReport = useCallback(name => {
+    if (reportProp === void 0) setInternalReport(name);
+    onReportChange?.(name);
+    if (!name) {
+      setReportFilters(null);
+      setSelectedOverride(null);
+      setSortOverride(null);
+      setGroupBy(null);
+    }
+  }, [reportProp, onReportChange]);
+  const handleClearBaseFilters = useCallback(() => {
+    setFiltersCleared(true);
+    if (propFilters && !reportFilters) onClearFilters?.();
+  }, [propFilters, reportFilters, onClearFilters]);
+  const handleSaveReport = useCallback(name => {
+    void savedReports.save(name, {
+      fieldnames: [...selectedFieldnames],
+      filters: effectiveFilters,
+      sort,
+      pageSize,
       groupBy,
-      filters
-    };
-    const updated = [...savedReports.filter(r => r.name !== report.name), report];
-    setSavedReports(updated);
-    void persistSavedReports(doctype, updated);
-    setSaveDialogOpen(false);
-    setSaveReportName("");
-  }, [saveReportName, enabledColumns, groupBy, filters, savedReports, doctype]);
-  const handleLoadReport = useCallback(report => {
-    setEnabledColumns(report.columns);
-    setGroupBy(report.groupBy);
-  }, []);
+      addTotals: totals.length > 0
+    }).then(savedName => {
+      notify({
+        severity: "success",
+        scope: "page",
+        body: t("report.saveDone", {
+          defaultValue: "Saved report \u201C{{name}}\u201D",
+          name: savedName
+        })
+      });
+      if (savedName !== currentReport) handleSelectReport(savedName);
+    }).catch(error => {
+      notify({
+        severity: "error",
+        scope: "page",
+        body: error instanceof Error ? error.message : t("report.saveFailed", "Could not save the report")
+      });
+    });
+  }, [savedReports, selectedFieldnames, effectiveFilters, sort, pageSize, groupBy, totals.length, currentReport, handleSelectReport, t]);
   const handleDeleteReport = useCallback(name => {
-    const updated = savedReports.filter(r => r.name !== name);
-    setSavedReports(updated);
-    void persistSavedReports(doctype, updated);
-  }, [savedReports, doctype]);
-  const handleExport = useCallback(exportData => {
+    void savedReports.remove(name).then(() => {
+      notify({
+        severity: "success",
+        scope: "page",
+        body: t("report.deleteDone", {
+          defaultValue: "Deleted report \u201C{{name}}\u201D",
+          name
+        })
+      });
+      if (name === currentReport) handleSelectReport(null);
+    }).catch(error => {
+      notify({
+        severity: "error",
+        scope: "page",
+        body: error instanceof Error ? error.message : t("report.deleteFailed", "Could not delete the report")
+      });
+    });
+  }, [savedReports, currentReport, handleSelectReport, t]);
+  const exportEnabled = Boolean(onExport) || canDownloadCsv();
+  const handleExport = useCallback(() => {
     if (onExport) {
-      onExport(exportData);
+      onExport(orderedRows);
       return;
     }
-    const cols = allColumns.filter(c => enabledColumns.includes(c.fieldname));
-    const headers = cols.map(c => c.label);
-    const csvRows = [headers.join(",")];
-    for (const row of exportData) {
-      const values = cols.map(col => {
-        const val = row[col.fieldname];
-        if (val === null || val === void 0) return "";
-        const str = String(val);
-        if (str.includes(",") || str.includes('"') || str.includes("\n")) {
-          return `"${str.replace(/"/g, '""')}"`;
-        }
-        return str;
-      });
-      csvRows.push(values.join(","));
-    }
-    const csvContent = csvRows.join("\n");
-    const blob = new Blob([csvContent], {
+    downloadBlob(new Blob([buildReportCsv(selectedColumns, orderedRows)], {
       type: "text/csv;charset=utf-8;"
+    }), `${doctype}_report.csv`);
+    notify({
+      severity: "success",
+      scope: "page",
+      body: t("report.exportDone", {
+        count: orderedRows.length,
+        defaultValue_one: "Exported {{count}} row to CSV",
+        defaultValue_other: "Exported {{count}} rows to CSV"
+      })
     });
-    downloadBlob(blob, `${doctype}_report.csv`);
-  }, [allColumns, enabledColumns, onExport, doctype]);
-  const exportEnabled = Boolean(onExport) || canDownloadCsv();
-  if (isMetaLoading) {
-    return /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "$2",
-      ...stackProps,
-      children: [/* @__PURE__ */jsx(Spinner, {
-        size: "large"
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$color10",
-        children: t("Loading {{doctype}} schema...", {
-          doctype
+  }, [onExport, selectedColumns, orderedRows, doctype, t]);
+  const handleColumnFilterChange = useCallback((fieldname, value) => {
+    setFilterDrafts(previous => {
+      if (value === "") {
+        if (!(fieldname in previous)) return previous;
+        const {
+          [fieldname]: _dropped,
+          ...rest
+        } = previous;
+        return rest;
+      }
+      return {
+        ...previous,
+        [fieldname]: value
+      };
+    });
+  }, []);
+  const handleClearColumnFilters = useCallback(() => {
+    setFilterDrafts({});
+    setCommittedFilters({});
+  }, []);
+  if (metaLoading && !meta) {
+    return /* @__PURE__ */jsx(Fragment, {
+      children: loadingFallback ?? /* @__PURE__ */jsx(YStack, {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        ...stackProps,
+        children: /* @__PURE__ */jsx(Spinner, {
+          size: "large"
         })
-      })]
+      })
     });
   }
-  if (metaError && !meta) {
-    return /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      ...knobProps.gap,
-      ...stackProps,
-      children: [/* @__PURE__ */jsx(Text, {
-        color: "$red11",
-        children: t("Failed to load {{doctype}} schema", {
-          doctype
+  if (metaError && metaRefused && !layoutMeta) {
+    if (recordShape.status === "pending") {
+      return /* @__PURE__ */jsx(Fragment, {
+        children: loadingFallback ?? /* @__PURE__ */jsx(YStack, {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          ...stackProps,
+          children: /* @__PURE__ */jsx(Spinner, {
+            size: "large"
+          })
         })
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$color10",
-        fontSize: "$2",
-        children: metaError.message
-      })]
+      });
+    }
+    return /* @__PURE__ */jsx(Fragment, {
+      children: errorFallback ? errorFallback(metaError) : /* @__PURE__ */jsx(EmptyState, {
+        testID: "frappe-report-not-permitted",
+        title: t("report.notPermitted", {
+          defaultValue: "You can't open the {{doctype}} report",
+          doctype
+        }),
+        description: refusalReason(metaError)
+      })
     });
   }
-  if (isLoading) {
-    return /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      gap: "$1",
-      ...stackProps,
-      children: [/* @__PURE__ */jsx(Spinner, {
-        size: "small"
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$color10",
-        fontSize: "$2",
-        children: t("Loading data...")
-      })]
+  if (metaError && !meta && !readsWithoutMeta) {
+    return /* @__PURE__ */jsx(Fragment, {
+      children: errorFallback ? errorFallback(metaError) : /* @__PURE__ */jsx(EmptyState, {
+        intent: "error",
+        title: t("report.metaFailed", {
+          defaultValue: "Couldn't load the {{doctype}} report",
+          doctype
+        }),
+        description: metaError.message
+      })
     });
   }
-  if (isError) {
-    return /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.panelPadding,
+  let body;
+  if (syncError && isPermissionError(syncError)) {
+    body = /* @__PURE__ */jsx(EmptyState, {
+      testID: "frappe-report-not-permitted",
+      title: t("report.notPermitted", {
+        defaultValue: "You can't open the {{doctype}} report",
+        doctype
+      }),
+      description: refusalReason(syncError)
+    });
+  } else if (syncError) {
+    body = /* @__PURE__ */jsx(EmptyState, {
+      intent: "error",
+      title: t("report.loadFailed", "Couldn't load report rows"),
+      description: syncError.message
+    });
+  } else if (rowsLoading && total === 0) {
+    body = /* @__PURE__ */jsx(YStack, {
+      flex: 1,
       alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */jsx(Spinner, {
+        size: "large"
+      })
+    });
+  } else if (total === 0) {
+    const hasFilters = effectiveFilters.length > 0;
+    body = /* @__PURE__ */jsx(EmptyState, {
+      title: t("report.emptyTitle", "No results"),
+      description: hasFilters ? t("report.emptyFiltered", "No rows match the current filters") : t("report.emptyDescription", {
+        defaultValue: "There are no {{doctype}} records yet",
+        doctype
+      }),
+      action: hasFilters ? /* @__PURE__ */jsx(Button, {
+        size: "$3",
+        onPress: () => {
+          handleClearColumnFilters();
+          handleClearBaseFilters();
+        },
+        children: t("report.clearAllFilters", "Clear all filters")
+      }) : void 0
+    });
+  } else {
+    body = /* @__PURE__ */jsxs(YStack, {
+      flex: 1,
+      minWidth: 0,
       ...knobProps.gap,
-      ...stackProps,
-      children: [/* @__PURE__ */jsx(Text, {
-        color: "$red11",
-        children: t("Failed to load {{doctype}} data", {
-          doctype
+      children: [chartData.length > 0 && /* @__PURE__ */jsx(YStack, {
+        ...knobProps.surface,
+        ...knobProps.containerRadius,
+        ...knobProps.panelPadding,
+        children: /* @__PURE__ */jsx(BarChart, {
+          data: chartData
         })
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$color10",
-        fontSize: "$2",
-        children: t("The live query could not load report rows.")
+      }), /* @__PURE__ */jsx(ReportGrid, {
+        columns: selectedColumns,
+        rows: gridRows,
+        sort,
+        onSortChange: setSortOverride,
+        columnFilters: filterDrafts,
+        onColumnFilterChange: handleColumnFilterChange,
+        onOpenRow: rowsPressable ? handleOpenRow : void 0,
+        onOpenLink,
+        totals,
+        groupByColumn
       })]
     });
   }
-  return /* @__PURE__ */jsxs(YStack, {
+  const content = /* @__PURE__ */jsxs(YStack, {
     flex: 1,
-    ...knobProps.borderRadius,
+    minWidth: 0,
     ...stackProps,
-    children: [/* @__PURE__ */jsxs(XStack, {
-      ...knobProps.panelPadding,
-      ...knobProps.surface,
-      ...knobProps.gap,
-      alignItems: "center",
-      borderBottomWidth: 1,
-      borderBottomColor: "$borderColor",
-      children: [isLiveStale ? /* @__PURE__ */jsxs(XStack, {
-        gap: "$2",
-        alignItems: "center",
-        children: [/* @__PURE__ */jsx(Spinner, {
-          size: "small",
-          "aria-label": t("Updating")
-        }), /* @__PURE__ */jsx(Text, {
-          ...knobProps.label,
-          color: formCommonColors.muted,
-          children: t("Updating...")
-        })]
-      }) : null, /* @__PURE__ */jsx(XStack, {
-        flex: 1
-      }), /* @__PURE__ */jsxs(Popover, {
-        placement: "bottom-end",
-        open: saveDialogOpen,
-        onOpenChange: setSaveDialogOpen,
-        children: [/* @__PURE__ */jsx(Popover.Trigger, {
-          asChild: true,
-          children: /* @__PURE__ */jsx(Button, {
-            size: "$2",
-            icon: FloppyDiskIcon,
-            children: t("Save")
-          })
-        }), /* @__PURE__ */jsx(PopoverContent, {
-          children: /* @__PURE__ */jsxs(YStack, {
-            ...knobProps.gap,
-            minWidth: 220,
-            children: [/* @__PURE__ */jsx(Text, {
-              ...knobProps.label,
-              fontWeight: "400",
-              children: t("Save Report")
-            }), /* @__PURE__ */jsx(Input, {
-              label: t("Report name"),
-              labelHidden: true,
-              placeholder: t("Report name"),
-              value: saveReportName,
-              onChangeText: setSaveReportName,
-              inputProps: {
-                onSubmitEditing: handleSaveReport
-              }
-            }), /* @__PURE__ */jsx(Button, {
-              size: "$2",
-              onPress: handleSaveReport,
-              disabled: !saveReportName.trim(),
-              children: t("Save")
-            })]
-          })
-        })]
-      }), savedReports.length > 0 && /* @__PURE__ */jsxs(Popover, {
-        placement: "bottom-end",
-        children: [/* @__PURE__ */jsx(Popover.Trigger, {
-          asChild: true,
-          children: /* @__PURE__ */jsx(Button, {
-            size: "$2",
-            icon: FolderOpenIcon,
-            children: t("Load")
-          })
-        }), /* @__PURE__ */jsx(PopoverContent, {
-          children: /* @__PURE__ */jsxs(YStack, {
-            ...knobProps.gap,
-            minWidth: 180,
-            children: [/* @__PURE__ */jsx(Text, {
-              ...knobProps.label,
-              fontWeight: "400",
-              color: formCommonColors.muted,
-              children: t("Saved Reports")
-            }), /* @__PURE__ */jsx(Separator, {}), savedReports.map(report => /* @__PURE__ */jsxs(XStack, {
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "$2",
-              ...knobProps.containerRadius,
-              hoverStyle: {
-                backgroundColor: "$color2"
-              },
-              cursor: "pointer",
-              onPress: () => handleLoadReport(report),
-              children: [/* @__PURE__ */jsx(Text, {
-                ...knobProps.body,
-                flex: 1,
-                children: report.name
-              }), /* @__PURE__ */jsx(Button, {
-                size: "$2",
-                circular: true,
-                chromeless: true,
-                icon: TrashIcon,
-                onPress: e => {
-                  e.stopPropagation();
-                  handleDeleteReport(report.name);
-                },
-                "aria-label": t("Delete {{name}}", {
-                  name: report.name
-                })
-              })]
-            }, report.name))]
-          })
-        })]
-      })]
-    }), /* @__PURE__ */jsx(ReportBuilder, {
+    children: [/* @__PURE__ */jsx(ReportViewToolbar, {
       columns: allColumns,
-      data,
-      groupBy: groupBy ?? void 0,
+      selected: selectedFieldnames,
+      onToggleColumn: handleToggleColumn,
+      onResetColumns: handleResetColumns,
+      groupBy,
       onGroupByChange: setGroupBy,
-      onColumnsChange: setEnabledColumns,
+      baseFilters,
+      onClearBaseFilters: baseFilters.length > 0 ? handleClearBaseFilters : void 0,
+      columnFilterCount: columnTuples.length,
+      onClearColumnFilters: handleClearColumnFilters,
+      savedReports: savedReports.reports,
+      currentReport,
+      onSelectReport: handleSelectReport,
+      onSaveReport: readsWithoutMeta ? void 0 : handleSaveReport,
+      onDeleteReport: readsWithoutMeta ? void 0 : handleDeleteReport,
       onExport: exportEnabled ? handleExport : void 0,
-      onRowPress,
-      showChart,
-      flex: 1
+      exportDisabled: total === 0
+    }), /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      minWidth: 0,
+      paddingHorizontal: "$3",
+      children: body
+    }), total > 0 && !syncError && /* @__PURE__ */jsx(YStack, {
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      children: /* @__PURE__ */jsx(DataTablePagination, {
+        pagination: {
+          pageIndex: effectivePage,
+          pageSize,
+          totalCount: total,
+          totalPages: pageCount
+        },
+        onPaginationChange: next => {
+          setPage(next.pageIndex);
+          setPageSize(next.pageSize);
+        },
+        pageSizeOptions: [...REPORT_PAGE_SIZES],
+        compact: true
+      })
     })]
   });
+  return isWeb ? content : /* @__PURE__ */jsx(ScrollView, {
+    flex: 1,
+    children: content
+  });
 }
 export { FrappeReportBuilder };
 //# sourceMappingURL=FrappeReportBuilder.mjs.map