@dashadmin/dash-reports 1.3.73 → 1.3.74-srcfree.2

package/src/core/useDashboard.ts

@@ -1,161 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import type { ReportMetric, ReportResult, VisualizationType } from './types';
-
-export interface DashboardPeriod {
-  id: string;
-  label: string;
-  start: string;
-  end: string;
-  isOpen: boolean;
-}
-
-export interface DashboardWidget {
-  key: string;
-  reportKey: string;
-  title: string;
-  titleText?: string;
-  pivot?: string;
-  metrics?: string[];
-  visualization?: VisualizationType;
-  size?: 'sm' | 'md' | 'lg' | 'full';
-  result?: ReportResult & { metrics?: ReportMetric[] };
-  error?: string;
-}
-
-export interface DashboardTenant {
-  tenant: { id: string; name: string };
-  period: DashboardPeriod | null;
-}
-
-/**
- * The tenants whose dashboards this user should see, each with its period.
- *
- * One cheap call so the page knows how many tenant panels to mount before any
- * of them fetches data — a TenancyAdmin sees one panel per restaurant, a
- * tenant user sees exactly one.
- */
-export function useDashboardTenants() {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [tenants, setTenants] = useState<DashboardTenant[]>([]);
-  const [widgets, setWidgets] = useState<DashboardWidget[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-
-    axiosRef.current
-      .get('report/dashboard')
-      .then((response: { data: { data: DashboardTenant[]; widgets: DashboardWidget[] } }) => {
-        if (!alive) return;
-        setTenants(response.data?.data ?? []);
-        setWidgets(response.data?.widgets ?? []);
-      })
-      .catch((e: Error) => {
-        if (alive) setError(e);
-      })
-      .finally(() => {
-        if (alive) setLoading(false);
-      });
-
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { tenants, widgets, loading, error };
-}
-
-export interface DashboardData {
-  tenantId: string;
-  period: DashboardPeriod;
-  /** 'live' | 'live-no-snapshot' | 'snapshot' — see the backend controller. */
-  source: string;
-  widgets: DashboardWidget[];
-}
-
-/**
- * One tenant's widgets for one period.
- *
- * Fetched per tenant rather than in one batch so panels load in parallel and
- * fail independently — a tenant whose data errors shows one broken panel, not
- * an empty dashboard.
- */
-export function useTenantDashboard(tenantId: string | null, period = 'current') {
-  const axios = useAxios();
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [data, setData] = useState<DashboardData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const sequence = useRef(0);
-
-  useEffect(() => {
-    if (!tenantId) return;
-
-    const ticket = ++sequence.current;
-    setLoading(true);
-    setError(null);
-
-    axiosRef.current
-      .get(`report/dashboard/${encodeURIComponent(tenantId)}`, { params: { period } })
-      .then((response: { data: DashboardData }) => {
-        if (ticket === sequence.current) setData(response.data);
-      })
-      .catch((e: Error) => {
-        if (ticket === sequence.current) setError(e);
-      })
-      .finally(() => {
-        if (ticket === sequence.current) setLoading(false);
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tenantId, period]);
-
-  return { data, loading, error };
-}
-
-/** The period picker's options for one tenant. */
-export function useTenantPeriods(tenantId: string | null) {
-  const axios = useAxios();
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [periods, setPeriods] = useState<DashboardPeriod[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!tenantId) return;
-
-    let alive = true;
-    setLoading(true);
-
-    axiosRef.current
-      .get(`report/dashboard/${encodeURIComponent(tenantId)}/periods`)
-      .then((response: { data: { data: DashboardPeriod[] } }) => {
-        if (alive) setPeriods(response.data?.data ?? []);
-      })
-      .catch(() => {
-        // A missing period list is not worth surfacing — the dashboard still
-        // works on the current period, which is the default.
-        if (alive) setPeriods([]);
-      })
-      .finally(() => {
-        if (alive) setLoading(false);
-      });
-
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tenantId]);
-
-  return { periods, loading };
-}

package/src/core/useReportExport.ts

@@ -1,68 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import { toQueryParams } from './queryParams';
-import type { ReportFilterState } from './types';
-
-/**
- * Download a report in one of the formats its spec advertises.
- *
- * `responseType: 'blob'` is an AXIOS REQUEST OPTION, not a query parameter.
- * The legacy Stats page put it inside `params`, so it was serialised into the
- * URL as `?responseType=blob` and axios still parsed the response as text —
- * which corrupted the binary and is one reason that export never worked. The
- * distinction is easy to miss because nothing errors; you just get a broken
- * file.
- */
-export function useReportExport(reportKey: string) {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [exporting, setExporting] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const exportReport = useCallback(
-    async (filters: ReportFilterState, format = 'xlsx') => {
-      setExporting(true);
-      setError(null);
-
-      try {
-        const response = await axiosRef.current.get(`report/${encodeURIComponent(reportKey)}/export`, {
-          params: { ...toQueryParams(filters), format },
-          responseType: 'blob',
-        });
-
-        const blob = new Blob([response.data], {
-          type: String(response.headers?.['content-type'] ?? 'application/octet-stream'),
-        });
-
-        // Prefer the filename the server chose — it carries the report key and
-        // the actual date range, which a client-side guess would drift from.
-        const disposition = String(response.headers?.['content-disposition'] ?? '');
-        const match = disposition.match(/filename\*?=(?:UTF-8'')?"?([^";]+)"?/i);
-        const filename = match ? decodeURIComponent(match[1]) : `${reportKey}.${format}`;
-
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        // Revoked on the next tick: revoking synchronously can cancel the
-        // download in some browsers before it has read the blob.
-        setTimeout(() => URL.revokeObjectURL(url), 0);
-      } catch (e) {
-        setError(e as Error);
-      } finally {
-        setExporting(false);
-      }
-    },
-    [reportKey],
-  );
-
-  return { exporting, error, exportReport };
-}
-
-export default useReportExport;

package/src/core/useReportList.ts

@@ -1,51 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import type { ReportListEntry } from './types';
-
-/**
- * Every report this caller may see.
- *
- * The backend has already filtered by role, so whatever comes back is safe to
- * render as a menu.
- */
-/**
- * useAxios() builds a NEW axios instance on every render (dash-axios-hook calls
- * axios.create() unmemoized), so it must never appear in a dependency array:
- * a fresh reference each render re-fires the effect, which sets state, which
- * re-renders — an unbroken request loop against the API. The instance is held
- * in a ref instead, and the effect depends only on values that are stable by
- * value.
- */
-export function useReportList() {
-  const axios = useAxios();
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-  const [reports, setReports] = useState<ReportListEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-
-    axiosRef.current
-      .get('report')
-      .then((response: { data: { data: ReportListEntry[] } }) => {
-        if (alive) setReports(response.data?.data ?? []);
-      })
-      .catch((e: Error) => {
-        if (alive) setError(e);
-      })
-      .finally(() => {
-        if (alive) setLoading(false);
-      });
-
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { reports, loading, error };
-}
-
-export default useReportList;

package/src/core/useReportPreview.ts

@@ -1,68 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import type { Granularity, ReportResult } from './types';
-
-/**
- * A small series for one report's list-page card.
- *
- * One request per card, fired in parallel and failing independently — a report
- * whose preview errors shows a card without a chart rather than blanking the
- * list. The engine this replaces fetched every report's full dataset plus one
- * request per chart type before the index rendered at all (2N requests to draw
- * a page nobody had chosen anything on yet); this is N cheap ones, at a coarse
- * grain, and only for what is on screen.
- */
-export function useReportPreview(
-  reportKey: string,
-  granularity: Granularity,
-  rangeDays: number,
-  enabled = true,
-) {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [result, setResult] = useState<ReportResult | null>(null);
-  const [loading, setLoading] = useState(enabled);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    if (!enabled || !reportKey) return;
-
-    let alive = true;
-
-    const end = new Date();
-    const start = new Date();
-    start.setDate(start.getDate() - (rangeDays || 30));
-
-    setLoading(true);
-
-    axiosRef.current
-      .get(`report/${encodeURIComponent(reportKey)}/series`, {
-        params: {
-          start: start.toISOString().slice(0, 10),
-          end: end.toISOString().slice(0, 10),
-          granularity,
-        },
-      })
-      .then((response: { data: ReportResult }) => {
-        if (alive) setResult(response.data);
-      })
-      .catch((e: Error) => {
-        if (alive) setError(e);
-      })
-      .finally(() => {
-        if (alive) setLoading(false);
-      });
-
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reportKey, granularity, rangeDays, enabled]);
-
-  return { result, loading, error };
-}
-
-export default useReportPreview;

package/src/core/useReportSeries.ts

@@ -1,59 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import { toQueryParams } from './queryParams';
-import type { ReportFilterState, ReportResult } from './types';
-
-export interface UseReportSeriesResult {
-  result: ReportResult | null;
-  loading: boolean;
-  error: Error | null;
-}
-
-/**
- * Fetch the bucketed series for a report under the current filters.
- *
- * Refetches whenever the filters change, and discards responses that arrive
- * out of order. Without the sequence guard, dragging a date range quickly
- * leaves whichever request happened to finish last on screen, which is not
- * necessarily the one the user is currently looking at.
- */
-export function useReportSeries(
-  reportKey: string,
-  filters: ReportFilterState | null,
-): UseReportSeriesResult {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [result, setResult] = useState<ReportResult | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const sequence = useRef(0);
-
-  useEffect(() => {
-    if (!reportKey || !filters) return;
-
-    const ticket = ++sequence.current;
-    setLoading(true);
-    setError(null);
-
-    axiosRef.current
-      .get(`report/${encodeURIComponent(reportKey)}/series`, { params: toQueryParams(filters) })
-      .then((response: { data: ReportResult }) => {
-        if (ticket === sequence.current) setResult(response.data);
-      })
-      .catch((e: Error) => {
-        if (ticket === sequence.current) setError(e);
-      })
-      .finally(() => {
-        if (ticket === sequence.current) setLoading(false);
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reportKey, JSON.stringify(filters)]);
-
-  return { result, loading, error };
-}
-
-export default useReportSeries;

package/src/core/useReportSpec.ts

@@ -1,79 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import type { ReportSpec } from './types';
-
-/**
- * Fetch a report's spec.
- *
- * Single-flight per key: React 18 StrictMode double-invokes effects in
- * development, and without the guard every report page would fire its spec
- * request twice on mount. The in-flight promise is shared rather than the
- * second call being dropped, so both callers still resolve.
- */
-const inFlight = new Map<string, Promise<ReportSpec>>();
-
-export interface UseReportSpecResult {
-  spec: ReportSpec | null;
-  loading: boolean;
-  error: Error | null;
-  reload: () => void;
-}
-
-export function useReportSpec(reportKey: string): UseReportSpecResult {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [spec, setSpec] = useState<ReportSpec | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-  const [nonce, setNonce] = useState(0);
-
-  // Survives unmount-during-fetch without setting state on a dead component.
-  const alive = useRef(true);
-  useEffect(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!reportKey) return;
-
-    setLoading(true);
-    setError(null);
-
-    const cacheKey = `${reportKey}:${nonce}`;
-
-    let promise = inFlight.get(cacheKey);
-    if (!promise) {
-      promise = axiosRef.current
-        .get(`report/${encodeURIComponent(reportKey)}/spec`)
-        .then((response: { data: ReportSpec }) => response.data)
-        .finally(() => {
-          inFlight.delete(cacheKey);
-        });
-      inFlight.set(cacheKey, promise);
-    }
-
-    promise
-      .then((data) => {
-        if (alive.current) setSpec(data);
-      })
-      .catch((e: Error) => {
-        if (alive.current) setError(e);
-      })
-      .finally(() => {
-        if (alive.current) setLoading(false);
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reportKey, nonce]);
-
-  const reload = useCallback(() => setNonce((n) => n + 1), []);
-
-  return { spec, loading, error, reload };
-}
-
-export default useReportSpec;

package/src/core/useReportTable.ts

@@ -1,71 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useAxios } from 'dash-axios-hook';
-import { toQueryParams } from './queryParams';
-import type { ReportFilterState, ReportTablePage } from './types';
-
-export interface UseReportTableResult {
-  page: ReportTablePage | null;
-  loading: boolean;
-  error: Error | null;
-  setPage: (page: number) => void;
-  currentPage: number;
-}
-
-/**
- * The paginated detail rows behind a report.
- *
- * `enabled` exists because the table is usually behind a toggle: fetching
- * detail rows for a report nobody has expanded is a wasted query on every
- * filter change, and these are the widest rows the endpoint serves.
- */
-export function useReportTable(
-  reportKey: string,
-  filters: ReportFilterState | null,
-  enabled = true,
-  perPage = 50,
-): UseReportTableResult {
-  const axios = useAxios();
-  // See useReportList: useAxios() is unmemoized and must stay out of deps.
-  const axiosRef = useRef(axios);
-  axiosRef.current = axios;
-
-  const [page, setPageData] = useState<ReportTablePage | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [currentPage, setPage] = useState(1);
-
-  const sequence = useRef(0);
-
-  // A filter change invalidates the page number: page 7 of the old result set
-  // is meaningless against the new one, and often past its end.
-  useEffect(() => {
-    setPage(1);
-  }, [JSON.stringify(filters)]);
-
-  useEffect(() => {
-    if (!enabled || !reportKey || !filters) return;
-
-    const ticket = ++sequence.current;
-    setLoading(true);
-    setError(null);
-
-    axiosRef.current
-      .get(`report/${encodeURIComponent(reportKey)}/table`, {
-        params: { ...toQueryParams(filters), page: currentPage, perPage },
-      })
-      .then((response: { data: ReportTablePage }) => {
-        if (ticket === sequence.current) setPageData(response.data);
-      })
-      .catch((e: Error) => {
-        if (ticket === sequence.current) setError(e);
-      })
-      .finally(() => {
-        if (ticket === sequence.current) setLoading(false);
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reportKey, JSON.stringify(filters), enabled, currentPage, perPage]);
-
-  return { page, loading, error, setPage, currentPage };
-}
-
-export default useReportTable;

package/src/core/visualizationLayout.ts

@@ -1,34 +0,0 @@
-import type { VisualizationType } from './types';
-
-/**
- * Which visualizations draw to a <canvas>, and therefore need a parent with a
- * DEFINITE height.
- *
- * Chart.js with `responsive: true` + `maintainAspectRatio: false` sizes its
- * canvas from the parent box. If that parent's height is content-derived —
- * `minHeight`, `auto`, or nothing at all — the canvas grows to fill it, which
- * grows the parent, which fires another resize, which grows the canvas again.
- * The card expands without bound and the page never settles. `minHeight` does
- * NOT prevent this: it sets a floor, not a bound.
- *
- * Kpi, Funnel and Table are ordinary DOM and must size to their content
- * instead — pinning them to a fixed height would clip a long funnel or a wide
- * table.
- */
-const CANVAS: ReadonlySet<string> = new Set<VisualizationType>(['Bar', 'Line', 'Pie', 'Doughnut']);
-
-export function isCanvasVisualization(type: string | null | undefined): boolean {
-  return !!type && CANVAS.has(type);
-}
-
-/**
- * The sx for a visualization's container: a definite height for canvases, and
- * content height for everything else.
- */
-export function visualizationBoxSx(type: string | null | undefined, height: number) {
-  return isCanvasVisualization(type)
-    ? { height, minHeight: height, maxHeight: height, overflow: 'hidden' }
-    : { minHeight: 0 };
-}
-
-export default isCanvasVisualization;

package/src/core/visualizationRegistry.ts

@@ -1,39 +0,0 @@
-import type { ComponentType } from 'react';
-import type { ReportResult, ReportSpec, TranslateFn, VisualizationType } from './types';
-
-/**
- * Which component renders which visualization type.
- *
- * A registry rather than a switch so the chart library is a swappable detail:
- * the MUI/Chart.js adapter registers one set, and a different adapter (or a
- * single overridden widget) can replace any of them without this package
- * changing. It is also what keeps `core/` free of any chart import, so the
- * hooks and types stay usable somewhere Chart.js is not wanted.
- */
-
-export interface VisualizationProps {
-  result: ReportResult;
-  spec: ReportSpec;
-  translate: TranslateFn;
-  options?: Record<string, unknown>;
-  height?: number;
-}
-
-const registry = new Map<VisualizationType, ComponentType<VisualizationProps>>();
-
-export function registerVisualization(
-  type: VisualizationType,
-  component: ComponentType<VisualizationProps>,
-): void {
-  registry.set(type, component);
-}
-
-export function getVisualization(type: VisualizationType): ComponentType<VisualizationProps> | null {
-  return registry.get(type) ?? null;
-}
-
-export function registeredVisualizations(): VisualizationType[] {
-  return Array.from(registry.keys());
-}
-
-export default registry;