// ─────────────────────────────────────────────────────────────────────
// MONTHLY EXPENSE REPORT — the flow.
//
// Capture → Review → Allocate happened all month (Upload Expense).
// This is the closing step: Review the period → Preview the document →
// Email it to the accountant. Every expense stays editable at every
// step — fresh eyes on the report often catch what the queue missed.
//
// Two shapes, switchable via Tweaks:
//   'single' — one workspace (period + expenses), then preview, then send
//   'wizard' — the same content as explicit steps 1·2·3·4
// ─────────────────────────────────────────────────────────────────────

const { useState: useMR, useEffect: useMRE } = React;

// Flow-shape tweak (set in proto-report-tweaks.jsx).
function useReportFlowShape() {
  const [shape, setShape] = useMR(() =>
    (window.REPORT_TWEAKS && window.REPORT_TWEAKS.flowShape) || 'single');
  useMRE(() => {
    const f = () => setShape((window.REPORT_TWEAKS && window.REPORT_TWEAKS.flowShape) || 'single');
    window.addEventListener('report-tweaks', f);
    return () => window.removeEventListener('report-tweaks', f);
  }, []);
  return shape;
}

// ── Period picker — month chips + editable custom range ──────────────
function PeriodPicker({ periodId, onChange }) {
  const store = useReportStore();
  // Sent reports live on the landing page — only show open/unsent periods here.
  const periods = REPORT_PERIODS.filter(p => p.current && !store.sent[p.id]);
  if (periods.length === 0) return null;
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {periods.map(p => {
        const on = p.id === periodId;
        return (
          <button key={p.id} onClick={() => onChange(p.id)} style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '9px 12px', cursor: 'pointer',
            background: on ? P.graphite : 'transparent',
            border: `1px solid ${on ? P.gold : P.slate}`,
            fontFamily: T.mono, fontSize: 9, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: on ? P.paper : P.mute,
          }}>
            {p.label}
          </button>
        );
      })}
    </div>
  );
}

// Editable date range — defaults to the full month; the manager can pull
// the boundaries in (or across months) and the report re-renders.
function RangeButton({ label, custom, onEdit }) {
  return (
    <button onClick={onEdit} style={{
      width: '100%', display: 'flex', alignItems: 'center', gap: 11, marginTop: 4,
      background: 'transparent', border: 'none', borderBottom: `1.5px solid ${P.slate}`,
      padding: '4px 0 11px', cursor: 'pointer', textAlign: 'left',
    }}>
      <Icon name="Calendar" size={18} color={custom ? P.gold : P.bone} strokeWidth={1.6} />
      <span style={{
        flex: 1, fontFamily: T.display, fontSize: 21, fontWeight: 700, letterSpacing: '-0.01em',
        color: P.paper,
      }}>{label}</span>
      {custom && <RptMono size={8} color={P.gold}>Custom</RptMono>}
      <RptMono size={9} color={P.gold} style={{ letterSpacing: '0.16em' }}>Edit</RptMono>
    </button>
  );
}

function RangeSheet({ range, defaults, onApply, onClose }) {
  const [start, setStart] = useMR((range || defaults).start);
  const [end, setEnd] = useMR((range || defaults).end);
  const selStyle = {
    background: P.ink, border: `1px solid ${P.slate}`, color: P.paper,
    padding: '10px 10px', fontFamily: T.mono, fontSize: 10, letterSpacing: '0.08em',
    textTransform: 'uppercase', outline: 'none', flex: 1,
  };
  const datePicker = (label, val, setVal) => (
    <div>
      <RptMono size={7.5} style={{ display: 'block', marginBottom: 6 }}>{label}</RptMono>
      <div style={{ display: 'flex', gap: 8 }}>
        <select value={Math.floor(val / 100)} onChange={e => setVal((+e.target.value) * 100 + (val % 100))} style={selStyle}>
          {[1, 2, 3, 4, 5, 6].map(m => <option key={m} value={m}>{RPT_MONTHS[m - 1]} 2026</option>)}
        </select>
        <select value={val % 100} onChange={e => setVal(Math.floor(val / 100) * 100 + (+e.target.value))} style={{ ...selStyle, flex: '0 0 84px' }}>
          {Array.from({ length: 31 }, (_, i) => i + 1).map(d => <option key={d} value={d}>{d}</option>)}
        </select>
      </div>
    </div>
  );
  const valid = end >= start;
  const node = (
    <div style={{ position: 'absolute', inset: 0, zIndex: 97 }}>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, background: 'rgba(10,10,11,0.8)',
        backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)', animation: 'sheetFade .2s ease',
      }} />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: P.graphite, borderTop: `1px solid ${P.gold}`, padding: '14px 22px 34px',
        animation: 'sheetIn .25s cubic-bezier(.2,.7,.3,1)',
      }}>
        <div style={{ width: 40, height: 4, background: P.slate, margin: '0 auto 16px' }} />
        <Eyebrow color={P.gold}>REPORTING PERIOD</Eyebrow>
        <div style={{
          fontFamily: T.display, fontSize: 22, fontWeight: 700, color: P.paper,
          marginTop: 6, letterSpacing: '-0.015em',
        }}>DATE RANGE</div>
        <div style={{ fontFamily: T.body, fontSize: 11.5, color: P.mute, marginTop: 6, lineHeight: 1.5 }}>
          The report includes every expense dated inside the range — it can span multiple months. Reset returns to all unreported expenses.
        </div>
        <div style={{ display: 'grid', gap: 12, marginTop: 16 }}>
          {datePicker('From', start, setStart)}
          {datePicker('Through', end, setEnd)}
        </div>
        {!valid && (
          <RptMono size={8} color={P.signal} style={{ display: 'block', marginTop: 10 }}>
            End date is before the start date
          </RptMono>
        )}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 18 }}>
          <button onClick={() => { onApply(null); onClose(); }} style={{
            height: 48, background: 'transparent', border: `1px solid ${P.slate}`, color: P.paper,
            fontFamily: T.mono, fontSize: 9.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer',
          }}>Reset to Default</button>
          <button disabled={!valid} onClick={() => { onApply({ start, end }); onClose(); }} style={{
            height: 48, background: valid ? P.gold : P.slate, border: 'none', color: P.ink,
            fontFamily: T.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
            cursor: valid ? 'pointer' : 'default',
          }}>Apply Range</button>
        </div>
      </div>
    </div>
  );
  const stage = (typeof document !== 'undefined') ? document.getElementById('proto-stage') : null;
  return stage ? ReactDOM.createPortal(node, stage) : node;
}

// ── One expense row ───────────────────────────────────────────────────
function ExpenseRow({ x, dim = false, onOpen, trailing, action = 'Change', secondary, onViewOriginal }) {
  return (
    <button onClick={onOpen} style={{
      width: '100%', textAlign: 'left', cursor: 'pointer', display: 'block',
      background: 'transparent', border: 'none', borderTop: `1px solid ${P.ink}`,
      padding: '12px 14px 11px', opacity: dim ? 0.55 : 1,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <RptMono size={7.5} color={P.mute} style={{ display: 'block', marginBottom: 3 }}>
            {x.date} · {x.category}{x.splitPct ? ` · split ${x.splitPct}%` : ''}
          </RptMono>
          <div style={{
            fontFamily: T.body, fontSize: 12.5, fontWeight: 500, color: P.paper,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{x.vendor}</div>
          <div style={{
            fontFamily: T.body, fontSize: 11.5, color: P.mute, marginTop: 3, lineHeight: 1.4,
          }}>{x.desc}</div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{
            fontFamily: T.display, fontSize: 15, fontWeight: 600, color: P.paper, letterSpacing: '-0.01em',
          }}>{rMoney(x.amount)}</div>
          {trailing}
        </div>
      </div>
      <div style={{ height: 1, background: P.slate, opacity: 0.45, margin: '10px 0 8px' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: P.gold, flexShrink: 0 }} />
          {onViewOriginal ? (
            <span role="button" onClick={(e) => { e.stopPropagation(); onViewOriginal(); }} style={{
              fontFamily: T.mono, fontSize: 7.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: P.gold, cursor: 'pointer', flexShrink: 0, padding: '2px 0',
            }}>View Original</span>
          ) : (
            <RptMono size={7.5} color={P.mute} style={{ flexShrink: 0 }}>Original preserved</RptMono>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
          {secondary && (
            <span role="button" onClick={(e) => { e.stopPropagation(); secondary.onClick(); }} style={{
              fontFamily: T.mono, fontSize: 8, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: P.mute, cursor: 'pointer', padding: '2px 0',
            }}>{secondary.label}</span>
          )}
          <RptMono size={8} color={P.gold} style={{ fontWeight: 700, letterSpacing: '0.16em' }}>
            {action.toUpperCase()} →
          </RptMono>
        </div>
      </div>
    </button>
  );
}

// ── Grouped-by-vehicle list ───────────────────────────────────────────
function VehicleGroups({ included, onOpen, onHold, onViewOriginal, sent }) {
  return (
    <React.Fragment>
      {reportGroupOrder(included).map(vid => {
        const rows = included.filter(x => x.vehicleId === vid);
        if (!rows.length) return null;
        const tgt = reportTarget(vid);
        const sub = rows.reduce((s, x) => s + x.amount, 0);
        return (
          <div key={vid} style={{ margin: '0 22px 14px', background: P.graphite }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 10, padding: '13px 14px 12px',
              background: P.slate, borderLeft: `3px solid ${P.gold}`,
            }}>
              <div style={{ minWidth: 0 }}>
                <div style={{
                  fontFamily: T.display, fontSize: 16.5, fontWeight: 800, color: P.paper,
                  letterSpacing: '0.02em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{tgt.short.toUpperCase()}</div>
                <RptMono size={7.5} color={P.bone} style={{ display: 'block', marginTop: 4, opacity: 0.75 }}>
                  {tgt.isOverhead ? tgt.nickname : `"${tgt.nickname}"`} · {rows.length} expense{rows.length === 1 ? '' : 's'}
                </RptMono>
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{
                  fontFamily: T.display, fontSize: 17, fontWeight: 800, color: P.gold, letterSpacing: '-0.01em',
                }}>{rMoney(sub)}</div>
              </div>
            </div>
            {rows.map(x => (
              <ExpenseRow key={x.id} x={x} onOpen={() => onOpen(x)} action={sent ? 'View' : 'Change Assignment'}
                onViewOriginal={onViewOriginal ? () => onViewOriginal(x) : null} />
            ))}
          </div>
        );
      })}
    </React.Fragment>
  );
}

// ── THE FLOW ──────────────────────────────────────────────────────────
function MonthlyReportFlow({ initialPeriodId, onBack, onSent, onAddExpense, fromTask = false }) {
  const shape = useReportFlowShape();
  const store = useReportStore();
  const [periodId, setPeriodId] = useMR(initialPeriodId || 'draft');
  const [range, setRange] = useMR(null);          // custom date range, null = default period
  const [rangeSheet, setRangeSheet] = useMR(false);
  // single: 'workspace' → 'preview' → 'email'
  // wizard: 'period' → 'expenses' → 'preview' → 'email'
  const [phase, setPhase] = useMR(shape === 'wizard' ? 'period' : 'workspace');
  const [openExpense, setOpenExpense] = useMR(null);
  const [changeExpense, setChangeExpense] = useMR(null); // upload-expense allocator, reused
  const [viewOriginal, setViewOriginal] = useMR(null);   // original-document viewer
  const [sentOverlay, setSentOverlay] = useMR(false);

  // Re-shape mid-flight if the tweak changes on the first screen.
  useMRE(() => {
    if (phase === 'workspace' && shape === 'wizard') setPhase('period');
    if (phase === 'period' && shape === 'single') setPhase('workspace');
    if (phase === 'expenses' && shape === 'single') setPhase('workspace');
  }, [shape]);

  const period = reportById(periodId);
  const sent = period.draft ? null : { on: period.sentOn, to: ACCOUNTANT.email };
  const { included, excluded } = reportExpenses(periodId, range);
  const roll = reportRollup(included);
  const rangeLabel = range
    ? fmtRange(range.start, range.end)
    : fmtRange(period.start, period.end);

  const wizard = shape === 'wizard';
  const stepNo = { period: 1, expenses: 2, preview: wizard ? 3 : 2, email: wizard ? 4 : 3, workspace: 1 }[phase];
  const stepTotal = wizard ? 4 : 3;
  const eyebrow = `Financials · Expense Reports · Step ${stepNo} of ${stepTotal}`;

  const back = () => {
    if (phase === 'email') return setPhase('preview');
    if (phase === 'preview') return setPhase(wizard ? 'expenses' : 'workspace');
    if (phase === 'expenses') return setPhase('period');
    return onBack && onBack();
  };

  const send = () => {
    const eff = range || { start: period.start, end: period.end };
    markReported(eff, 'May 29, 2026');
    setSentOverlay(true);
  };

  // ── shared blocks ──
  const periodBlock = (
    <React.Fragment>
      <div style={{ padding: '0 0 8px' }}><RowRule>REPORTING PERIOD</RowRule></div>
      <div style={{ padding: '12px 22px 6px' }}>
        <RangeButton label={rangeLabel} custom={!!range} onEdit={() => setRangeSheet(true)} />
      </div>
    </React.Fragment>
  );

  const summaryBlock = (
    <div style={{ padding: '14px 22px 16px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, background: P.graphite, border: `1px solid ${P.graphite}` }}>
        {[
          { k: 'Expenses', v: String(roll.count) },
          { k: 'Total', v: rMoney(roll.total) },
          { k: 'Originals', v: `${roll.docs} of ${roll.count}` },
        ].map(c => (
          <div key={c.k} style={{ background: P.ink, padding: '11px 12px' }}>
            <RptMono size={7.5}>{c.k}</RptMono>
            <div style={{ fontFamily: T.display, fontSize: 16, fontWeight: 700, color: P.paper, marginTop: 4, letterSpacing: '-0.01em' }}>{c.v}</div>
          </div>
        ))}
      </div>
      {roll.missing.length > 0 && !sent && false && (
        <div style={{
          marginTop: 8, display: 'flex', alignItems: 'center', gap: 10,
          border: `1px solid ${P.signal}`, padding: '10px 12px',
        }}>
          <Icon name="TriangleAlert" size={14} color={P.signal} strokeWidth={1.7} />
          <span style={{ fontFamily: T.body, fontSize: 11.5, color: P.bone, lineHeight: 1.4 }}>
            {roll.missing.length === 1
              ? '1 expense has no original attached — the accountant receives an incomplete package.'
              : `${roll.missing.length} expenses have no original attached.`}
          </span>
        </div>
      )}
    </div>
  );

  const expensesBlock = (
    <React.Fragment>
      <div style={{ padding: '0 0 8px' }}>
        <RowRule>EXPENSES · GROUPED BY VEHICLE</RowRule>
      </div>
      {sent && (
        <div style={{ padding: '8px 22px 12px' }}>
          <RptMono size={8} color={P.mute} style={{ display: 'block', letterSpacing: '0.16em' }}>
            ARCHIVED AS SENT REPORT
          </RptMono>
        </div>
      )}
      <VehicleGroups included={included} sent={sent}
        onOpen={sent ? setOpenExpense : setChangeExpense}
        onViewOriginal={setViewOriginal} />

      {!sent && (
        <div style={{ padding: '2px 22px 16px' }}>
          <button onClick={onAddExpense} style={{
            width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            padding: '13px 14px', cursor: 'pointer', background: 'transparent',
            border: `1px dashed ${P.slate}`, color: P.paper,
            fontFamily: T.mono, fontSize: 9.5, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <Icon name="add" size={14} color={P.gold} strokeWidth={1.8} />
            Add an expense to this period
          </button>
        </div>
      )}
    </React.Fragment>
  );

  const footer = (label, action, sub) => (
    <div style={{ padding: '10px 22px 14px', borderTop: `1px solid ${P.graphite}`, background: P.ink, flex: '0 0 auto' }}>
      <button onClick={action} style={{
        width: '100%', height: 52, background: P.gold, border: `1px solid ${P.gold}`,
        color: P.ink, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        fontFamily: T.mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
      }}>{label}</button>
      {sub && <RptMono size={8} style={{ display: 'block', textAlign: 'center', marginTop: 8 }}>{sub}</RptMono>}
    </div>
  );

  const sentBanner = sent && (
    <div style={{ margin: '14px 22px 4px', display: 'flex', alignItems: 'center', gap: 10, border: `1px solid ${P.slate}`, padding: '11px 12px' }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={P.gold}
        strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
      <span style={{ fontFamily: T.body, fontSize: 11.5, color: P.bone }}>
        Sent {sent.on} to {ACCOUNTANT.name}. The archived report stays exactly as delivered.
      </span>
    </div>
  );

  return (
    <React.Fragment>
      <RptBar
        title={fromTask ? 'View Inbox' : 'Expense Report'}
        eyebrow={eyebrow} onClose={back} />

      {/* ── WIZARD step 1 · PERIOD ── */}
      {phase === 'period' && (
        <React.Fragment>
          <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', background: P.ink }} data-screen-label="rpt-period">
            <div style={{ padding: '18px 22px 14px' }}>
              <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 30, lineHeight: 0.92, letterSpacing: '-0.02em', color: P.paper }}>SELECT THE<br />PERIOD</div>
            </div>
            {periodBlock}
            {summaryBlock}
          </div>
          {footer('Review Expenses', () => setPhase('expenses'))}
        </React.Fragment>
      )}

      {/* ── WIZARD step 2 · EXPENSES ── */}
      {phase === 'expenses' && (
        <React.Fragment>
          <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', background: P.ink }} data-screen-label="rpt-expenses">
            <div style={{ padding: '18px 22px 4px' }}>
              <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 30, lineHeight: 0.92, letterSpacing: '-0.02em', color: P.paper }}>REVIEW THE<br />PERIOD</div>
            </div>
            {sentBanner}
            <div style={{ height: 10 }} />
            {expensesBlock}
            <div style={{ height: 8 }} />
          </div>
          {footer('Preview Document', () => setPhase('preview'), `${roll.count} expenses · ${rMoney(roll.total)} · ${roll.docs} originals attached`)}
        </React.Fragment>
      )}

      {/* ── SINGLE-SCREEN workspace ── */}
      {phase === 'workspace' && (
        <React.Fragment>
          <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', background: P.ink }} data-screen-label="rpt-workspace">
            <div style={{ padding: '18px 22px 4px' }}>
              <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 30, lineHeight: 0.92, letterSpacing: '-0.02em', color: P.paper }}>ONE PERIOD,<br />ONE PACKAGE</div>
              <div style={{ fontFamily: T.body, fontSize: 12, color: P.mute, marginTop: 9, lineHeight: 1.5, maxWidth: 320 }}>
                Everything filed during the reporting period, with its originals — ready
                to review and send to the accountant.
              </div>
            </div>
            {sentBanner}
            <div style={{ height: 14 }} />
            {periodBlock}
            {summaryBlock}
            {expensesBlock}
            <div style={{ height: 8 }} />
          </div>
          {footer('Preview Document', () => setPhase('preview'), `${roll.count} expenses · ${rMoney(roll.total)} · ${roll.docs} originals attached`)}
        </React.Fragment>
      )}

      {/* ── PREVIEW ── */}
      {phase === 'preview' && (
        <ReportPreview period={{ ...period, range: rangeLabel }} included={included} roll={roll} sent={sent}
          onOpenExpense={setOpenExpense}
          onViewOriginal={setViewOriginal}
          onContinue={() => setPhase('email')} />
      )}

      {/* ── EMAIL ── */}
      {phase === 'email' && (
        <ReportEmail period={{ ...period, label: rangeLabel, range: rangeLabel }} roll={roll} onSend={send} />
      )}

      {/* Expense sheet — reachable from every phase */}
      {openExpense && (
        <ReportExpenseSheet expense={openExpense} locked={!!sent}
          onClose={() => setOpenExpense(null)} />
      )}

      {/* Original document — straight from the Vault */}
      {viewOriginal && (
        <OriginalViewerSheet expense={viewOriginal} onClose={() => setViewOriginal(null)} />
      )}

      {/* Change assignment — the SAME allocator used in Upload Expense */}
      {changeExpense && !sent && (() => {
        const baseId = changeExpense.baseId || changeExpense.id;
        const full = changeExpense.fullAmount || changeExpense.amount;
        const value = (changeExpense.split && changeExpense.split.length > 1)
          ? { mode: 'split', splits: changeExpense.split.map(sp => ({ ...sp })) }
          : changeExpense.vehicleId === 'overhead' ? { mode: 'overhead' }
          : changeExpense.vehicleId === 'none' ? { mode: 'none' }
          : { mode: 'vehicle', vehicleId: changeExpense.vehicleId };
        return (
          <AllocatorSheet
            line={{ desc: changeExpense.desc, net: full, suggest: changeExpense.vehicleId }}
            vehicles={vehiclePool([VEHICLE, VEHICLE_MERCEDES])}
            value={value}
            money={{ main: rMoney(full) }}
            onApply={(a) => {
              const prev = ReportStore.state.edits[baseId] || {};
              if (a.mode === 'split' && a.splits && a.splits.length > 1) {
                ReportStore.setIn('edits', baseId, { ...prev, split: a.splits.map(sp => ({ ...sp })), vehicleId: a.splits[0].id });
              } else {
                const vid = a.mode === 'vehicle' ? a.vehicleId
                  : a.mode === 'overhead' ? 'overhead'
                  : a.mode === 'none' ? 'none' : null;
                if (vid) ReportStore.setIn('edits', baseId, { ...prev, split: null, vehicleId: vid });
              }
            }}
            onClose={() => setChangeExpense(null)} />
        );
      })()}

      {rangeSheet && (
        <RangeSheet range={range} defaults={{ start: period.start, end: period.end }}
          onApply={setRange} onClose={() => setRangeSheet(false)} />
      )}

      {sentOverlay && (
        <ReportSentOverlay period={{ ...period, label: rangeLabel, range: rangeLabel }} roll={roll}
          onClose={() => { setSentOverlay(false); onSent && onSent(periodId); }} />
      )}
    </React.Fragment>
  );
}

Object.assign(window, { MonthlyReportFlow });