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

package/src/ReportsDashboard.tsx

@@ -1,61 +0,0 @@
-import { Alert, Box, LinearProgress, Typography, useTheme } from '@mui/material';
-import { useDashboardTenants } from './core/useDashboard';
-import { TenantDashboard } from './TenantDashboard';
-import type { TranslateFn } from './core/types';
-
-export interface ReportsDashboardProps {
-  translate: TranslateFn;
-  title?: string;
-}
-
-/**
- * The home-dashboard stats block.
- *
- * Renders one TenantDashboard per tenant the caller manages — a TenancyAdmin
- * sees every restaurant, a tenant user sees exactly one (and then without a
- * redundant heading naming the only tenant there is).
- *
- * Always live: the window is the tenant's currently-open cash count period, and
- * an operator watching mid-service wants what has happened so far, not a figure
- * frozen earlier. Looking back at a closed period is a deliberate act via the
- * per-tenant period selector, and that view is served from the snapshot taken
- * at closing.
- */
-export function ReportsDashboard({ translate, title }: ReportsDashboardProps) {
-  const theme = useTheme();
-  const { tenants, loading, error } = useDashboardTenants();
-
-  if (loading) return <LinearProgress />;
-
-  if (error) {
-    return (
-      <Alert severity="warning" sx={{ my: 2 }}>
-        {translate('dash_reports.errors.dashboard', { _: 'These stats could not be loaded.' })}
-      </Alert>
-    );
-  }
-
-  if (tenants.length === 0) return null;
-
-  const single = tenants.length === 1;
-
-  return (
-    <Box sx={{ mt: 2 }}>
-      <Typography variant="h5" sx={{ color: theme.palette.text.primary, mb: 2 }}>
-        {title ?? translate('dash_reports.dashboard.title', { _: 'This period' })}
-      </Typography>
-
-      {tenants.map((entry) => (
-        <TenantDashboard
-          key={entry.tenant.id}
-          tenantId={entry.tenant.id}
-          tenantName={entry.tenant.name}
-          translate={translate}
-          showHeading={!single}
-        />
-      ))}
-    </Box>
-  );
-}
-
-export default ReportsDashboard;

package/src/ReportsIndex.tsx

@@ -1,113 +0,0 @@
-import { Alert, Box, Card, CardActionArea, CardContent, LinearProgress, Typography, useTheme } from '@mui/material';
-import { useReportList } from './core/useReportList';
-import { label } from './core/label';
-import { useReportPreview } from './core/useReportPreview';
-import { PreviewWidget } from './adapters/mui/PreviewWidget';
-import type { ReportListEntry, TranslateFn } from './core/types';
-
-export interface ReportsIndexProps {
-  translate: TranslateFn;
-  onOpen: (reportKey: string) => void;
-}
-
-/**
- * The report picker.
- *
- * Renders from the list endpoint alone — ONE request. The engine this replaces
- * fetched every report's full dataset up front to draw its landing page (a
- * monthly series plus one request per chart type, per report), so opening the
- * index cost 2N requests before anyone had chosen anything. Data is fetched
- * when a report is opened, not before.
- *
- * The list is already role-filtered server-side, so whatever arrives is what
- * this caller may see.
- */
-/**
- * One report's card, with its own preview request.
- *
- * A component per card rather than one batched fetch, so the previews load in
- * parallel and fail independently: a report whose preview errors shows a card
- * without a chart instead of taking the whole list down with it.
- */
-function ReportCard({
-  report, translate, onOpen,
-}: { report: ReportListEntry; translate: TranslateFn; onOpen: (key: string) => void }) {
-  const theme = useTheme();
-  const { result, loading } = useReportPreview(
-    report.key,
-    report.previewGranularity,
-    report.defaultRangeDays,
-  );
-
-  return (
-    <Card variant="outlined">
-      <CardActionArea onClick={() => onOpen(report.key)} sx={{ height: '100%' }}>
-        <CardContent>
-          <Typography variant="h6" sx={{ color: theme.palette.text.primary }}>
-            {label(translate, report.title, report.titleText)}
-          </Typography>
-
-          <PreviewWidget
-            result={result}
-            loading={loading}
-            type={report.defaultVisualization}
-            translate={translate}
-            metrics={report.metrics}
-          />
-
-        </CardContent>
-      </CardActionArea>
-    </Card>
-  );
-}
-
-export function ReportsIndex({ translate, onOpen }: ReportsIndexProps) {
-  const theme = useTheme();
-  const { reports, loading, error } = useReportList();
-
-  if (loading) return <LinearProgress />;
-
-  if (error) {
-    return (
-      <Alert severity="error" sx={{ m: 2 }}>
-        {translate('dash_reports.errors.list', { _: 'Reports could not be loaded.' })}
-      </Alert>
-    );
-  }
-
-  if (reports.length === 0) {
-    return (
-      <Box sx={{ p: 4 }}>
-        <Typography variant="body1" sx={{ color: theme.palette.text.secondary }}>
-          {translate('dash_reports.no_reports', { _: 'No reports are available for your account.' })}
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ p: { xs: 2, md: 3 } }}>
-      <Typography variant="h5" sx={{ color: theme.palette.text.primary, mb: 3 }}>
-        {translate('dash_reports.title', { _: 'Reports' })}
-      </Typography>
-
-      <Box
-        sx={{
-          display: 'grid',
-          gap: 2,
-          gridTemplateColumns: {
-            xs: '1fr',
-            sm: 'repeat(2, 1fr)',
-            lg: 'repeat(3, 1fr)',
-          },
-        }}
-      >
-        {reports.map((report) => (
-          <ReportCard key={report.key} report={report} translate={translate} onOpen={onOpen} />
-        ))}
-      </Box>
-    </Box>
-  );
-}
-
-export default ReportsIndex;

package/src/ReportsModule.tsx

@@ -1,42 +0,0 @@
-import { Box, Button, Stack } from '@mui/material';
-import { useNavigate, useParams } from 'react-router-dom';
-import { ReportsIndex } from './ReportsIndex';
-import { ReportPage } from './ReportPage';
-import type { TranslateFn } from './core/types';
-
-export interface ReportsModuleProps {
-  translate: TranslateFn;
-  /** Base path this module is mounted at, e.g. '/reports'. */
-  basePath: string;
-}
-
-/**
- * The whole reports module behind a single route.
- *
- * One resource, not one per report: the set of reports is decided by the
- * BACKEND registry, so hardcoding a resource per report in the frontend would
- * mean a frontend change (and a redeploy) every time a domain registers one —
- * exactly the coupling the spec-driven design exists to remove. A domain that
- * registers a sixth report gets it here with no frontend change at all.
- */
-export function ReportsModule({ translate, basePath }: ReportsModuleProps) {
-  const { reportKey } = useParams();
-  const navigate = useNavigate();
-
-  if (!reportKey) {
-    return <ReportsIndex translate={translate} onOpen={(key) => navigate(`${basePath}/${key}`)} />;
-  }
-
-  return (
-    <Box>
-      <Stack direction="row" sx={{ px: { xs: 2, md: 3 }, pt: 2 }}>
-        <Button size="small" onClick={() => navigate(basePath)}>
-          ← {translate('dash_reports.back_to_list', { _: 'All reports' })}
-        </Button>
-      </Stack>
-      <ReportPage reportKey={reportKey} translate={translate} />
-    </Box>
-  );
-}
-
-export default ReportsModule;

package/src/TenantDashboard.tsx

@@ -1,290 +0,0 @@
-import { useState } from 'react';
-import {
-  Alert, Box, Card, CardContent, Chip, FormControl, LinearProgress, MenuItem,
-  Select, Stack, Typography, useTheme,
-} from '@mui/material';
-import { useTenantDashboard, useTenantPeriods } from './core/useDashboard';
-import { getVisualization } from './core/visualizationRegistry';
-import { label as renderLabel } from './core/label';
-import { visualizationBoxSx } from './core/visualizationLayout';
-import type { DashboardWidget } from './core/useDashboard';
-import type { ReportSpec, TranslateFn, VisualizationType } from './core/types';
-import './adapters/mui';
-
-export interface TenantDashboardProps {
-  tenantId: string;
-  tenantName?: string;
-  translate: TranslateFn;
-  /** Hide the tenant heading when only one tenant is ever shown. */
-  showHeading?: boolean;
-  /**
-   * Pin to one period instead of letting the viewer choose.
-   *
-   * Used by the cash count show view, which is already about one specific
-   * period — offering a picker there would let someone navigate away from the
-   * record they are looking at without the surrounding page changing.
-   */
-  period?: string;
-  /** Hide the period selector (implied when `period` is given). */
-  hidePeriodPicker?: boolean;
-}
-
-/**
- * Tile widths as a 12-column span, chosen so rows tile exactly.
- *
- * The previous set (sm 3 / md 4) left a 1-column gap on the first row and a
- * 3-column gap on the second, which is why the dashboard looked ragged.
- */
-const SPAN: Record<string, number> = { sm: 4, md: 6, lg: 8, full: 12 };
-
-/**
- * The same, against the 6-column container breakpoint.
- *
- * `sm` is 2 rather than 3 so the three distribution tiles still tile one exact
- * row here; at 3 they wrapped 2+1 and left an orphan.
- */
-const SPAN_SM: Record<string, number> = { sm: 2, md: 6, lg: 6, full: 6 };
-
-/**
- * One tenant's period dashboard.
- *
- * Rendered once per tenant: a TenancyAdmin gets one of these per restaurant,
- * a tenant user gets exactly one. Each fetches its own data, so a slow or
- * failing tenant costs one panel rather than the page.
- *
- * The period selector defaults to the open cash count and can look back at
- * closed ones. That distinction is surfaced, not hidden — a closed period is
- * served from the snapshot taken when it was closed, and saying so is the
- * difference between "these numbers are final" and "these are still moving".
- */
-export function TenantDashboard({
-  tenantId,
-  tenantName,
-  translate,
-  showHeading = true,
-  period: pinnedPeriod,
-  hidePeriodPicker,
-}: TenantDashboardProps) {
-  const theme = useTheme();
-  const [selectedPeriod, setPeriod] = useState('current');
-
-  const period = pinnedPeriod ?? selectedPeriod;
-  const showPicker = !pinnedPeriod && !hidePeriodPicker;
-
-  const { data, loading, error } = useTenantDashboard(tenantId, period);
-  // Not fetched at all when the picker is hidden — a request whose only purpose
-  // is to fill a control nobody will see.
-  const { periods } = useTenantPeriods(showPicker ? tenantId : null);
-
-  return (
-    <Box sx={{ mb: 4 }}>
-      {/* Title, period and picker share a card of their own.
-          Loose on the page they read as page furniture rather than as the
-          controls governing the tiles below; boxing them makes the relationship
-          explicit and gives the header the same visual weight as the widgets. */}
-      <Card variant="outlined" sx={{ mb: 2 }}>
-      <Stack
-        direction="row"
-        sx={{
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-          gap: 1.5,
-          px: 2,
-          py: 1.5,
-        }}
-      >
-        {showHeading && (
-          <Typography variant="h6" sx={{ color: theme.palette.text.primary }}>
-            {tenantName ?? tenantId}
-          </Typography>
-        )}
-
-        <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
-          {data?.period && (
-            <Chip
-              size="small"
-              variant="outlined"
-              label={`${data.period.start.slice(0, 10)} → ${data.period.end.slice(0, 10)}`}
-            />
-          )}
-
-          {/* A closed period's figures are frozen; an open one is still moving.
-              Conflating the two would let someone quote a number that changes
-              under them ten minutes later. */}
-          {data && (
-            <Chip
-              size="small"
-              color={data.period?.isOpen ? 'warning' : 'default'}
-              label={translate(
-                data.period?.isOpen ? 'dash_reports.period.open' : 'dash_reports.period.closed',
-                { _: data.period?.isOpen ? 'In progress' : 'Closed' },
-              )}
-            />
-          )}
-
-          {showPicker && periods.length > 1 && (
-            <FormControl size="small" sx={{ minWidth: 190 }}>
-              <Select value={selectedPeriod} onChange={(e) => setPeriod(String(e.target.value))}>
-                {periods.map((p) => (
-                  <MenuItem key={p.id} value={p.id}>
-                    {p.id === 'current'
-                      ? translate('dash_reports.period.current', { _: 'Current period' })
-                      : p.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        </Stack>
-      </Stack>
-      </Card>
-
-      {loading && <LinearProgress />}
-
-      {error && (
-        <Alert severity="warning">
-          {translate('dash_reports.errors.dashboard', { _: 'These stats could not be loaded.' })}
-        </Alert>
-      )}
-
-      {data && (
-        <Box
-          sx={{
-            // Container queries, not viewport breakpoints. This block is
-            // rendered both full-width and inside a 50% column, and viewport
-            // breakpoints cannot tell those apart — a wide window would lay out
-            // twelve columns inside a half-width box and shred the tiles.
-            containerType: 'inline-size',
-            display: 'grid',
-            gap: 2,
-            gridTemplateColumns: 'repeat(12, 1fr)',
-            '@container (max-width: 900px)': { gridTemplateColumns: 'repeat(6, 1fr)' },
-            '@container (max-width: 560px)': { gridTemplateColumns: '1fr' },
-            // Without this, every tile stretches to the tallest in its row —
-            // a short KPI tile next to a seven-stage funnel became a mostly
-            // empty box the height of the funnel.
-            alignItems: 'start',
-          }}
-        >
-          {data.widgets.map((widget) => (
-            <WidgetTile key={widget.key} widget={widget} translate={translate} />
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-function WidgetTile({ widget, translate }: { widget: DashboardWidget; translate: TranslateFn }) {
-  const theme = useTheme();
-  const span = SPAN[widget.size ?? 'md'] ?? 4;
-
-  const Visualization = widget.visualization ? getVisualization(widget.visualization as VisualizationType) : null;
-
-  return (
-    <Card
-      variant="outlined"
-      sx={{
-        gridColumn: `span ${span}`,
-        // Matches the container breakpoints on the grid above.
-        '@container (max-width: 900px)': {
-          gridColumn: `span ${SPAN_SM[widget.size ?? 'md'] ?? 6}`,
-        },
-        '@container (max-width: 560px)': { gridColumn: '1 / -1' },
-      }}
-    >
-      <CardContent>
-        <Typography variant="subtitle2" sx={{ color: theme.palette.text.secondary, mb: 1 }}>
-          {renderLabel(translate, widget.title, widget.titleText)}
-        </Typography>
-
-        {widget.error ? (
-          // One tile's failure is one tile, never the dashboard.
-          <Typography variant="caption" sx={{ color: theme.palette.text.secondary }}>
-            {translate('dash_reports.errors.widget', { _: 'Unavailable' })}
-          </Typography>
-        ) : widget.result && Visualization && hasData(widget) ? (
-          // Canvas widgets get a definite height; Kpi/Funnel/Table size to
-          // their content. Without the bound, Chart.js grows the tile forever.
-          <Box sx={visualizationBoxSx(widget.visualization, 220)}>
-            <Visualization
-              result={widget.result}
-              spec={specFor(widget)}
-              translate={translate}
-            />
-          </Box>
-        ) : (
-          <Box sx={{ py: 3, display: 'grid', placeItems: 'center' }}>
-            <Typography variant="caption" sx={{ color: theme.palette.text.secondary }}>
-              {translate('dash_reports.no_data', { _: 'No data for this range.' })}
-            </Typography>
-          </Box>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-/**
- * The minimal spec a widget renderer needs.
- *
- * A tile does not fetch the report's full spec — that would be a second request
- * per tile for information the series response already carries. The renderers
- * only read `metrics` (for Kpi and Funnel labels) and `dimensions` (for stable
- * colour slots), so this supplies exactly that.
- */
-/**
- * Whether a tile has anything worth drawing.
- *
- * A doughnut whose every slice is zero renders as an empty ring with a legend
- * of nothings — strictly worse than saying "no data", because it looks like a
- * chart that failed rather than a period in which nothing happened.
- */
-function hasData(widget: DashboardWidget): boolean {
-  const result = widget.result;
-  if (!result) return false;
-
-  const anySeries = (result.series ?? []).some((s) =>
-    (s.data ?? []).some((v) => v !== null && v !== undefined && v !== 0),
-  );
-
-  const anyTotal = Object.values(result.totals ?? {}).some(
-    (v) => v !== null && v !== undefined && v !== 0,
-  );
-
-  return anySeries || anyTotal;
-}
-
-function specFor(widget: DashboardWidget): ReportSpec {
-  // The backend ships the real definitions; the series fallback exists only
-  // for a pivoted tile, whose series are dimension values rather than metrics.
-  // Falling back for a metric tile would lose `decimal` and format an average
-  // of 0.26 minutes as "0".
-  const metrics = widget.result?.metrics
-    ?? (widget.result?.series ?? []).map((s) => ({
-      key: s.key,
-      label: s.label,
-      labelText: s.labelText,
-      kind: 'count' as const,
-      decimal: false,
-    }));
-
-  return {
-    key: widget.reportKey,
-    title: widget.title,
-    granularities: ['total'],
-    defaultGranularity: 'total',
-    defaultVisualization: (widget.visualization ?? 'Bar') as VisualizationType,
-    previewGranularity: 'total',
-    timezone: widget.result?.timezone ?? 'UTC',
-    dimensions: [],
-    metrics,
-    visualizations: [],
-    filters: {},
-    exporters: [],
-    defaultRangeDays: 30,
-  };
-}
-
-export default TenantDashboard;

package/src/adapters/mui/BarWidget.tsx

@@ -1,66 +0,0 @@
-import { Bar } from 'react-chartjs-2';
-import { ensureChartsRegistered } from './chartSetup';
-import { baseChartOptions } from './chartTheme';
-import { useChartData } from './useChartData';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-ensureChartsRegistered();
-
-/**
- * Magnitude per bucket.
- *
- * Bars are thin with a small rounded cap on the data end only — the baseline
- * end stays square so the bar reads as anchored rather than floating. Grouped
- * rather than stacked by default: a stack answers "what is the total", a group
- * answers "how do these compare", and comparison is what a pivoted report is
- * for. Adjacent fills carry a surface-coloured gap instead of a stroke, so
- * they separate without a border drawn around every mark.
- */
-export function BarWidget(props: VisualizationProps) {
-  const { chrome, datasets, labels, longLabels } = useChartData(props);
-  const stacked = props.options?.stacked === true;
-
-  const data = {
-    labels,
-    datasets: datasets.map((d) => ({
-      label: d.label,
-      data: d.data,
-      backgroundColor: d.color,
-      borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 },
-      borderSkipped: 'bottom' as const,
-      borderWidth: 0,
-      maxBarThickness: 28,
-      categoryPercentage: 0.7,
-      barPercentage: 0.9,
-    })),
-  };
-
-  const base = baseChartOptions(chrome, datasets.length > 1);
-
-  return (
-    <Bar
-      data={data}
-      height={props.height ?? 320}
-      options={{
-        ...base,
-        scales: {
-          ...base.scales,
-          x: { ...base.scales.x, stacked },
-          y: { ...base.scales.y, stacked },
-        },
-        plugins: {
-          ...base.plugins,
-          tooltip: {
-            ...base.plugins.tooltip,
-            callbacks: {
-              title: (items: Array<{ dataIndex: number }>) =>
-                longLabels[items[0]?.dataIndex] ?? '',
-            },
-          },
-        },
-      }}
-    />
-  );
-}
-
-export default BarWidget;

package/src/adapters/mui/DoughnutWidget.tsx

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '@mui/material';
-import { Doughnut } from 'react-chartjs-2';
-import { ensureChartsRegistered } from './chartSetup';
-import { chartChrome } from './chartTheme';
-import { label as renderLabel } from '../../core/label';
-import { buildSlotMap, colorForSlot, MAX_SERIES } from './palette';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-ensureChartsRegistered();
-
-/**
- * Composition across the whole window.
- *
- * Collapses the timeline: each series becomes its window total, so this answers
- * "what share" rather than "when". Only meaningful for a part-of-whole reading,
- * which is why the backend offers it on some reports and not others.
- *
- * A 2px surface-coloured gap between arcs separates neighbours without drawing
- * a stroke around every slice.
- */
-export function DoughnutWidget({ result, spec, translate, height }: VisualizationProps) {
-  const theme = useTheme();
-
-  const { labels, values, colors, chrome, total } = useMemo(() => {
-    const c = chartChrome(theme);
-    const pivotKey = result.meta?.pivot ?? undefined;
-    const slots = buildSlotMap(spec, pivotKey, result.series.map((s) => s.key));
-
-    const totals = result.series.map((series) => ({
-      key: series.key,
-      label: renderLabel(translate, series.label, series.labelText),
-      slot: slots.get(series.key) ?? 0,
-      value: series.data.reduce<number>((sum, v) => sum + (v ?? 0), 0),
-    }));
-
-    // Fold the tail rather than inventing a ninth hue.
-    const kept = totals.filter((t) => t.slot < MAX_SERIES);
-    const folded = totals.filter((t) => t.slot >= MAX_SERIES);
-
-    if (folded.length > 0) {
-      kept.push({
-        key: '__other__',
-        label: translate('dash_reports.other', { _: 'Other', count: folded.length }),
-        slot: MAX_SERIES,
-        value: folded.reduce((sum, t) => sum + t.value, 0),
-      });
-    }
-
-    return {
-      chrome: c,
-      labels: kept.map((t) => t.label),
-      values: kept.map((t) => t.value),
-      colors: kept.map((t) => colorForSlot(t.slot, c.dark)),
-      total: kept.reduce((sum, t) => sum + t.value, 0),
-    };
-  }, [result, spec, translate, theme]);
-
-  return (
-    <Doughnut
-      height={height ?? 320}
-      data={{
-        labels,
-        datasets: [{
-          data: values,
-          backgroundColor: colors,
-          borderColor: chrome.surface,
-          borderWidth: 2,
-        }],
-      }}
-      options={{
-        responsive: true,
-        maintainAspectRatio: false,
-        cutout: '58%',
-        plugins: {
-          legend: {
-            display: true,
-            position: 'bottom' as const,
-            labels: {
-              color: chrome.axisText,
-              usePointStyle: true,
-              pointStyle: 'circle' as const,
-              boxWidth: 8,
-              boxHeight: 8,
-              padding: 16,
-            },
-          },
-          tooltip: {
-            backgroundColor: chrome.tooltipBg,
-            titleColor: chrome.tooltipText,
-            bodyColor: chrome.tooltipText,
-            borderColor: chrome.grid,
-            borderWidth: 1,
-            padding: 10,
-            cornerRadius: 6,
-            usePointStyle: true,
-            callbacks: {
-              // The share is the point of this chart, so the tooltip states it
-              // rather than leaving the reader to estimate an angle.
-              label: (item: { label?: string; parsed: number }) => {
-                const share = total > 0 ? Math.round((item.parsed / total) * 1000) / 10 : 0;
-                return `${item.label}: ${item.parsed.toLocaleString()} (${share}%)`;
-              },
-            },
-          },
-        },
-      }}
-    />
-  );
-}
-
-export default DoughnutWidget;