// dashboards.jsx — analytics page with hand-rolled SVG charts

const DASH_CSS = `
.dash { flex: 1; overflow-y: auto; padding: 28px 36px 60px; background: var(--bg-app); }
.dash-h {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 6px;
}
.dash-title {
  font-size: 28px; font-weight: 800; color: var(--ink-strong);
  letter-spacing: -0.025em; margin: 0;
}
.dash-sub { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; }
.dash-filter-bar {
  display: flex; gap: 8px; margin-left: auto;
}
.dash-filter-bar select, .dash-filter-bar .dash-pill {
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: white;
  color: var(--ink-body);
}
.dash-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dash-pill .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.dash-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.dash-card-h {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.dash-card-h .label {
  font-size: 12px; font-weight: 700; color: var(--ink-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dash-card-h .delta {
  font-size: 11px; font-weight: 600;
  margin-left: auto;
  padding: 2px 7px; border-radius: 4px;
}
.dash-card-h .delta-up   { background: #e0f6ec; color: #14774e; }
.dash-card-h .delta-down { background: #fde6ea; color: #b8324e; }
.dash-card-h .delta-flat { background: #f0f1f4; color: #5f6473; }

.kpi-value {
  font-size: 36px; font-weight: 800; color: var(--ink-strong);
  letter-spacing: -0.03em; line-height: 1;
}
.kpi-unit { font-size: 14px; color: var(--ink-muted); font-weight: 500; margin-left: 4px; }
.kpi-sub { font-size: 12px; color: var(--ink-muted); margin-top: 8px; }

/* Spans */
.dc-3 { grid-column: span 3; }
.dc-4 { grid-column: span 4; }
.dc-6 { grid-column: span 6; }
.dc-7 { grid-column: span 7; }
.dc-8 { grid-column: span 8; }
.dc-12 { grid-column: span 12; }

.dash-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-muted); margin-top: 8px; }
.dash-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.dash-legend .lg .sw { width: 10px; height: 3px; border-radius: 2px; }

/* Workload bars */
.workload-row { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 10px; margin-bottom: 8px; }
.workload-row .nm { font-size: 12.5px; color: var(--ink-body); display: flex; align-items: center; gap: 6px; }
.workload-bar { height: 18px; border-radius: 4px; background: var(--bg-subtle); overflow: hidden; display: flex; }
.workload-seg {
  height: 100%; min-width: 1px;
  font-size: 9.5px; color: white; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.workload-cap { font-size: 11px; color: var(--ink-muted); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.workload-cap.over { color: var(--status-blocked); font-weight: 700; }

.delay-row {
  display: grid; grid-template-columns: 1fr 60px 80px;
  font-size: 12.5px; padding: 10px 0; align-items: center;
  border-bottom: 1px solid var(--border-row);
}
.delay-row:last-child { border-bottom: none; }
.delay-bar-wrap { background: var(--bg-subtle); height: 8px; border-radius: 4px; overflow: hidden; }
.delay-bar-fill { height: 100%; background: #d97f1f; }

.donut-center {
  font-size: 28px; font-weight: 800; fill: var(--ink-strong);
  letter-spacing: -0.02em;
}
.donut-center-sub { font-size: 10px; fill: var(--ink-muted); font-weight: 500; }

.dash-card .empty { color: var(--ink-faint); font-size: 12px; padding: 20px 0; text-align: center; }
`;

if (typeof document !== "undefined" && !document.getElementById("dash-css")) {
  const s = document.createElement("style");
  s.id = "dash-css"; s.textContent = DASH_CSS; document.head.appendChild(s);
}

// ── Seeded metrics ──────────────────────────────────────────────
// Burndown for current sprint (s24, 10 working days)
const BURNDOWN = {
  days: ["D1","D2","D3","D4","D5","D6","D7","D8","D9","D10"],
  ideal:  [62, 56, 50, 43, 37, 31, 25, 19, 12,  6],
  actual: [62, 60, 58, 53, 50, 45, 40, 38, 28, null], // today is day 9
  total: 62,
};

// Velocity for last 6 sprints
const VELOCITY = [
  { id: "s19", label: "S19", committed: 48, completed: 42 },
  { id: "s20", label: "S20", committed: 52, completed: 50 },
  { id: "s21", label: "S21", committed: 56, completed: 47 },
  { id: "s22", label: "S22", committed: 58, completed: 55 },
  { id: "s23", label: "S23", committed: 62, completed: 60 },
  { id: "s24", label: "S24", committed: 62, completed: 38, inProgress: true },
];

// Throughput: tasks closed per week last 8 weeks
const THROUGHPUT = [
  { wk: "W08", n:  9 }, { wk: "W09", n: 11 }, { wk: "W10", n: 14 },
  { wk: "W11", n: 12 }, { wk: "W12", n: 16 }, { wk: "W13", n: 18 },
  { wk: "W14", n: 13 }, { wk: "W15", n: 17 },
];

// Workload by person (sprint 24 hours)
const WORKLOAD = [
  { id: "mj",  inProgress: 14, todo: 18, review: 6, capacity: 35 },
  { id: "pr",  inProgress: 12, todo: 8,  review: 4, capacity: 30 },
  { id: "le",  inProgress: 8,  todo: 12, review: 8, capacity: 30 },
  { id: "ts",  inProgress: 16, todo: 22, review: 4, capacity: 35 },
  { id: "df",  inProgress: 10, todo: 6,  review: 2, capacity: 25 },
  { id: "ay",  inProgress: 6,  todo: 10, review: 12, capacity: 30 },
];

// Status distribution (current sprint)
const STATUS_DIST = [
  { id: "done",     n: 12, color: "var(--status-done)"     },
  { id: "review",   n:  4, color: "var(--status-review)"   },
  { id: "progress", n:  6, color: "var(--status-progress)" },
  { id: "todo",     n:  5, color: "var(--status-todo)"     },
  { id: "blocked",  n:  1, color: "var(--status-blocked)"  },
];

// Delay reason breakdown for the on-time card (last 30 days)
const DELAY_REASON_STATS = [
  { id: "review",    n: 7 },
  { id: "scope",     n: 5 },
  { id: "blocked",   n: 4 },
  { id: "estimate",  n: 3 },
  { id: "reprio",    n: 2 },
  { id: "other",     n: 1 },
];

// ── Tiny chart components (pure SVG) ─────────────────────────────
function LineChart({ width = 600, height = 220, padding = 36, series, labels, yMax }) {
  const innerW = width - padding * 2;
  const innerH = height - padding * 2;
  const max = yMax || Math.max(...series.flatMap(s => s.data.filter(v => v != null)));
  const xStep = innerW / (labels.length - 1);
  const yScale = (v) => padding + innerH - (v / max) * innerH;
  const path = (data) => data.map((v, i) => v == null ? null : `${i === 0 ? "M" : "L"} ${padding + i * xStep} ${yScale(v)}`).filter(Boolean).join(" ");
  // Y-axis ticks
  const ticks = [0, max * 0.25, max * 0.5, max * 0.75, max].map(v => Math.round(v));
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width="100%" height={height} style={{ display: "block" }}>
      {/* gridlines */}
      {ticks.map((v, i) => (
        <g key={i}>
          <line x1={padding} x2={width - padding} y1={yScale(v)} y2={yScale(v)} stroke="#eceef2" strokeWidth="1"/>
          <text x={padding - 8} y={yScale(v) + 4} fontSize="10.5" textAnchor="end" fill="#9aa0ae">{v}</text>
        </g>
      ))}
      {/* x-labels */}
      {labels.map((l, i) => (
        <text key={i} x={padding + i * xStep} y={height - padding + 16} fontSize="10.5" textAnchor="middle" fill="#9aa0ae">{l}</text>
      ))}
      {/* lines */}
      {series.map((s, i) => (
        <g key={i}>
          {s.dashed && <path d={path(s.data)} fill="none" stroke={s.color} strokeWidth="2" strokeDasharray="5 4" opacity=".7"/>}
          {!s.dashed && (
            <>
              <path d={path(s.data) + ` L ${padding + (s.data.findLastIndex(v => v != null)) * xStep} ${height - padding} L ${padding} ${height - padding} Z`} fill={s.color} opacity=".08"/>
              <path d={path(s.data)} fill="none" stroke={s.color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
              {s.data.map((v, i) => v == null ? null : (
                <circle key={i} cx={padding + i * xStep} cy={yScale(v)} r="3.5" fill="white" stroke={s.color} strokeWidth="2"/>
              ))}
            </>
          )}
        </g>
      ))}
    </svg>
  );
}

function BarChart({ width = 480, height = 200, padding = 30, data, keys, colors }) {
  const innerW = width - padding * 2;
  const innerH = height - padding * 2;
  const max = Math.max(...data.flatMap(d => keys.map(k => d[k] || 0)));
  const groupW = innerW / data.length;
  const barW = (groupW - 8) / keys.length;
  const yScale = (v) => (v / max) * innerH;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width="100%" height={height} style={{ display: "block" }}>
      {[0, max * 0.5, max].map((v, i) => (
        <g key={i}>
          <line x1={padding} x2={width - padding} y1={padding + innerH - yScale(v)} y2={padding + innerH - yScale(v)} stroke="#eceef2"/>
          <text x={padding - 8} y={padding + innerH - yScale(v) + 4} fontSize="10.5" textAnchor="end" fill="#9aa0ae">{Math.round(v)}</text>
        </g>
      ))}
      {data.map((d, i) => (
        <g key={i} transform={`translate(${padding + i * groupW + 4} 0)`}>
          {keys.map((k, j) => {
            const h = yScale(d[k] || 0);
            return (
              <g key={k}>
                <rect x={j * barW} y={padding + innerH - h} width={barW - 2} height={h}
                      fill={colors[j]} rx="2" opacity={d.inProgress ? 0.55 : 1}/>
              </g>
            );
          })}
          <text x={(groupW - 8) / 2} y={height - padding + 16} fontSize="10.5" textAnchor="middle" fill="#9aa0ae">{d.label}</text>
        </g>
      ))}
    </svg>
  );
}

function AreaChart({ width = 600, height = 180, padding = 30, data }) {
  const innerW = width - padding * 2;
  const innerH = height - padding * 2;
  const max = Math.max(...data.map(d => d.n));
  const xStep = innerW / (data.length - 1);
  const yScale = (v) => padding + innerH - (v / max) * innerH;
  const linePath = data.map((d, i) => `${i === 0 ? "M" : "L"} ${padding + i * xStep} ${yScale(d.n)}`).join(" ");
  const areaPath = linePath + ` L ${padding + (data.length - 1) * xStep} ${padding + innerH} L ${padding} ${padding + innerH} Z`;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width="100%" height={height} style={{ display: "block" }}>
      <defs>
        <linearGradient id="dash-area-grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity=".25"/>
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={areaPath} fill="url(#dash-area-grad)"/>
      <path d={linePath} fill="none" stroke="var(--brand)" strokeWidth="2.5" strokeLinecap="round"/>
      {data.map((d, i) => (
        <g key={i}>
          <circle cx={padding + i * xStep} cy={yScale(d.n)} r="3.5" fill="white" stroke="var(--brand)" strokeWidth="2"/>
          <text x={padding + i * xStep} y={height - padding + 16} fontSize="10.5" textAnchor="middle" fill="#9aa0ae">{d.wk}</text>
        </g>
      ))}
    </svg>
  );
}

function Donut({ size = 180, thickness = 22, segments, centerLabel, centerSub }) {
  const r = (size - thickness) / 2;
  const c = size / 2;
  const total = segments.reduce((a, s) => a + s.n, 0);
  const circ = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} style={{ display: "block", margin: "0 auto" }}>
      <circle cx={c} cy={c} r={r} fill="none" stroke="#f0f1f4" strokeWidth={thickness}/>
      {segments.map((s, i) => {
        const len = (s.n / total) * circ;
        const dasharray = `${len} ${circ - len}`;
        const el = (
          <circle key={i} cx={c} cy={c} r={r} fill="none"
                  stroke={s.color} strokeWidth={thickness}
                  strokeDasharray={dasharray}
                  strokeDashoffset={-offset}
                  transform={`rotate(-90 ${c} ${c})`}/>
        );
        offset += len;
        return el;
      })}
      <text x={c} y={c - 2} textAnchor="middle" className="donut-center">{centerLabel}</text>
      <text x={c} y={c + 16} textAnchor="middle" className="donut-center-sub">{centerSub}</text>
    </svg>
  );
}

// ── Cards ─────────────────────────────────────────────────────────
function KpiCard({ label, value, unit, delta, deltaTone = "up", sub, span = 3 }) {
  return (
    <div className={`dash-card dc-${span}`}>
      <div className="dash-card-h">
        <span className="label">{label}</span>
        {delta && <span className={`delta delta-${deltaTone}`}>{delta}</span>}
      </div>
      <div>
        <span className="kpi-value">{value}</span>
        {unit && <span className="kpi-unit">{unit}</span>}
      </div>
      {sub && <div className="kpi-sub">{sub}</div>}
    </div>
  );
}

function OnTimeCard() {
  const total = 30;
  const onTime = 22;
  const late   = 7;
  const cancelled = 1;
  const pct = Math.round((onTime / (onTime + late)) * 100);
  return (
    <div className="dash-card dc-4">
      <div className="dash-card-h">
        <span className="label">On-time delivery</span>
        <span className="delta delta-down">−4 pts</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "center", marginTop: 8 }}>
        <Donut size={120} thickness={16}
               segments={[
                 { n: onTime,    color: "#14b76a" },
                 { n: late,      color: "#d97f1f" },
                 { n: cancelled, color: "#9aa0ae" },
               ]}
               centerLabel={`${pct}%`}
               centerSub="ON TIME"/>
        <div style={{ fontSize: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "#14b76a" }}/>
            <span style={{ flex: 1, color: "var(--ink-body)" }}>On time</span>
            <b style={{ color: "var(--ink-strong)" }}>{onTime}</b>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "#d97f1f" }}/>
            <span style={{ flex: 1, color: "var(--ink-body)" }}>Late</span>
            <b style={{ color: "var(--ink-strong)" }}>{late}</b>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "#9aa0ae" }}/>
            <span style={{ flex: 1, color: "var(--ink-body)" }}>Cancelled</span>
            <b style={{ color: "var(--ink-strong)" }}>{cancelled}</b>
          </div>
          <div style={{ marginTop: 10, fontSize: 11, color: "var(--ink-muted)" }}>{total} closed · last 30 days</div>
        </div>
      </div>
    </div>
  );
}

function DelayReasonsCard() {
  const max = Math.max(...DELAY_REASON_STATS.map(d => d.n));
  return (
    <div className="dash-card dc-4">
      <div className="dash-card-h">
        <span className="label">Why we're slipping</span>
      </div>
      <div style={{ marginTop: 10 }}>
        {DELAY_REASON_STATS.map(d => {
          const reason = DELAY_REASONS.find(r => r.id === d.id);
          return (
            <div key={d.id} className="delay-row">
              <span style={{ color: "var(--ink-body)" }}>{reason?.label || d.id}</span>
              <div className="delay-bar-wrap">
                <div className="delay-bar-fill" style={{ width: `${(d.n / max) * 100}%` }}/>
              </div>
              <b style={{ textAlign: "right", color: "var(--ink-strong)", fontVariantNumeric: "tabular-nums" }}>{d.n} task{d.n === 1 ? "" : "s"}</b>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DashboardsPage() {
  const [scope, setScope] = React.useState("checkout");
  const [range, setRange] = React.useState("30d");
  return (
    <div className="dash">
      <div className="dash-h">
        <div>
          <h1 className="dash-title">Dashboards</h1>
          <p className="dash-sub">Velocity, throughput, on-time delivery — at a glance</p>
        </div>
        <div className="dash-filter-bar">
          <select value={scope} onChange={(e) => setScope(e.target.value)}>
            <option value="all">All projects</option>
            {PROJECTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <select value={range} onChange={(e) => setRange(e.target.value)}>
            <option value="7d">Last 7 days</option>
            <option value="30d">Last 30 days</option>
            <option value="qtd">Quarter to date</option>
          </select>
          <span className="dash-pill"><span className="sw"/> Sprint 24</span>
        </div>
      </div>

      <div className="dash-grid">
        {/* KPI row */}
        <KpiCard label="Active tasks"      value="38" delta="+5"   deltaTone="up"   sub="Across 4 epics"          span={3}/>
        <KpiCard label="Avg velocity"      value="51" unit="pts"   delta="+9%"  deltaTone="up"   sub="6-sprint rolling"        span={3}/>
        <KpiCard label="Cycle time (p50)"  value="3.1" unit="days" delta="−0.4 d" deltaTone="up"   sub="From In-Progress to Done" span={3}/>
        <KpiCard label="Overdue"           value="6"  unit="open"  delta="+2"   deltaTone="down" sub="Past due, not closed"     span={3}/>

        {/* Burndown — wide */}
        <div className="dash-card dc-8">
          <div className="dash-card-h">
            <span className="label">Sprint 24 burndown</span>
            <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--ink-muted)" }}>Day 9 of 10</span>
          </div>
          <LineChart
            width={700} height={230}
            labels={BURNDOWN.days}
            yMax={BURNDOWN.total}
            series={[
              { color: "#9aa0ae", data: BURNDOWN.ideal,  dashed: true },
              { color: "#a25ddc", data: BURNDOWN.actual, dashed: false },
            ]}/>
          <div className="dash-legend">
            <span className="lg"><span className="sw" style={{ background: "#9aa0ae" }}/>Ideal</span>
            <span className="lg"><span className="sw" style={{ background: "#a25ddc" }}/>Actual</span>
            <span style={{ marginLeft: "auto", color: "var(--ink-faint)" }}>28 pts remaining · trending behind by 9 pts</span>
          </div>
        </div>

        {/* On-time delivery */}
        <OnTimeCard/>

        {/* Velocity */}
        <div className="dash-card dc-6">
          <div className="dash-card-h">
            <span className="label">Velocity by sprint</span>
          </div>
          <BarChart
            width={520} height={220}
            data={VELOCITY}
            keys={["committed", "completed"]}
            colors={["#cdd2db", "#a25ddc"]}/>
          <div className="dash-legend">
            <span className="lg"><span className="sw" style={{ background: "#cdd2db" }}/>Committed</span>
            <span className="lg"><span className="sw" style={{ background: "#a25ddc" }}/>Completed</span>
          </div>
        </div>

        {/* Delay reasons */}
        <DelayReasonsCard/>

        {/* Throughput */}
        <div className="dash-card dc-8">
          <div className="dash-card-h">
            <span className="label">Throughput — tasks closed per week</span>
            <span className="delta delta-up">+12% vs last 8 wks</span>
          </div>
          <AreaChart width={720} height={200} data={THROUGHPUT}/>
        </div>

        {/* Status distribution donut */}
        <div className="dash-card dc-4">
          <div className="dash-card-h"><span className="label">Status mix · Sprint 24</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "center", marginTop: 4 }}>
            <Donut size={150} thickness={20}
                   segments={STATUS_DIST.map(s => ({ n: s.n, color: getComputedStyle(document.documentElement).getPropertyValue(s.color.replace("var(", "").replace(")", "")) || "#999" }))}
                   centerLabel={String(STATUS_DIST.reduce((a, s) => a + s.n, 0))}
                   centerSub="TASKS"/>
            <div>
              {STATUS_DIST.map(s => {
                const status = STATUSES.find(x => x.id === s.id);
                return (
                  <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, marginBottom: 4 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }}/>
                    <span style={{ flex: 1 }}>{status?.label || s.id}</span>
                    <b>{s.n}</b>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Workload */}
        <div className="dash-card dc-12">
          <div className="dash-card-h">
            <span className="label">Workload — Sprint 24</span>
            <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--ink-muted)" }}>Hours by status · capacity in italic</span>
          </div>
          <div style={{ marginTop: 14 }}>
            {WORKLOAD.map(w => {
              const total = w.inProgress + w.todo + w.review;
              const over = total > w.capacity;
              const colors = ["#fdab3d", "#579bfc", "#a25ddc"]; // progress, todo, review
              const segs = [w.inProgress, w.todo, w.review];
              const labels = ["In Progress", "To Do", "Review"];
              const max = Math.max(...WORKLOAD.map(x => x.inProgress + x.todo + x.review + 5));
              return (
                <div key={w.id} className="workload-row">
                  <span className="nm">
                    <Avatar person={PEOPLE.find(p => p.id === w.id)} size="sm"/>
                    {(PEOPLE.find(p => p.id === w.id) || {}).name?.split(" ")[0]}
                  </span>
                  <div className="workload-bar">
                    {segs.map((n, i) => (
                      <div key={i} className="workload-seg"
                           style={{ width: `${(n / max) * 100}%`, background: colors[i] }}
                           title={`${labels[i]}: ${n}h`}>
                        {n >= 6 ? `${n}h` : ""}
                      </div>
                    ))}
                  </div>
                  <span className={`workload-cap ${over ? "over" : ""}`}>
                    {total}h / {w.capacity}h
                  </span>
                </div>
              );
            })}
            <div className="dash-legend">
              <span className="lg"><span className="sw" style={{ background: "#fdab3d" }}/>In progress</span>
              <span className="lg"><span className="sw" style={{ background: "#579bfc" }}/>To do</span>
              <span className="lg"><span className="sw" style={{ background: "#a25ddc" }}/>Review</span>
              <span style={{ marginLeft: "auto", color: "var(--ink-faint)" }}>Tomás &amp; Marcus are over capacity</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashboardsApp() {
  return (
    <div className="app" style={{ position: "relative", overflow: "hidden" }}>
      <Sidebar activeProject={null} currentUserId="ay" access={PROJECT_ACCESS}/>
      <div className="main">
        <Topbar crumbs={["Acme Labs", "Dashboards"]} searchValue="" onSearch={() => {}} onOpenPalette={() => {}} currentUserId="ay" people={PEOPLE}/>
        <DashboardsPage/>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardsPage, DashboardsApp });