// MissionChef — Dashboard (große KPI-Wand, Chart mit Achsen, Live-Service)

function KpiCard({ eyebrow, value, delta, sub, accent, mono = true }) {
  const isGood = delta === undefined ? null : delta >= 0;
  return (
    <div className="mc-card" style={{
      padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 6,
      borderLeft: accent ? `3px solid ${accent}` : undefined,
    }}>
      <div className="mc-eyebrow">{eyebrow}</div>
      <div className={mono ? 'mc-num' : ''} style={{
        fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em',
        lineHeight: 1.02, marginTop: 2,
      }}>
        {value}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4, minHeight: 22 }}>
        {delta !== undefined && delta !== null && (
          <Pill tone={isGood ? 'leaf' : 'ember'}>
            {isGood ? '↑' : '↓'} {fmtPCT(Math.abs(delta))}
          </Pill>
        )}
        <span style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>{sub}</span>
      </div>
    </div>
  );
}

// Real chart: bars (covers) + line (revenue) with axes, gridlines, value labels
function RevenueChart({ data, range = 14 }) {
  const slice = data.slice(-range);
  const w = 1180, h = 280;
  const padL = 56, padR = 56, padT = 24, padB = 36;
  const innerW = w - padL - padR;
  const innerH = h - padT - padB;

  const revMax = Math.max(...slice.map(d => d.revenue));
  const revMin = Math.min(...slice.map(d => d.revenue));
  const covMax = Math.max(...slice.map(d => d.covers));

  // Round revenue scale to nice number
  const revTop = Math.ceil(revMax / 1000) * 1000;
  const revBot = Math.floor(revMin / 1000) * 1000;

  const x = (i) => padL + (slice.length === 1 ? innerW / 2 : (i / (slice.length - 1)) * innerW);
  const yRev = (v) => padT + innerH - ((v - revBot) / (revTop - revBot || 1)) * innerH;

  const barW = innerW / slice.length * 0.42;

  const linePath = slice.map((d, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${yRev(d.revenue)}`).join(' ');
  const areaPath = linePath + ` L ${x(slice.length - 1)} ${padT + innerH} L ${x(0)} ${padT + innerH} Z`;

  // Y ticks
  const yTicks = 4;
  const ticks = Array.from({ length: yTicks + 1 }, (_, i) => revBot + ((revTop - revBot) * i) / yTicks);

  const total = slice.reduce((s, d) => s + d.revenue, 0);
  const totalCovers = slice.reduce((s, d) => s + d.covers, 0);
  const avgTicket = total / Math.max(totalCovers, 1);

  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', overflow: 'visible' }}>
      {/* gridlines + y axis labels */}
      {ticks.map((t, i) => {
        const yy = yRev(t);
        return (
          <g key={i}>
            <line x1={padL} x2={w - padR} y1={yy} y2={yy} stroke="var(--mc-rule)" strokeDasharray={i === 0 ? '0' : '2 4'} />
            <text x={padL - 10} y={yy + 4} textAnchor="end" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-dim)">
              {Math.round(t / 1000)}k
            </text>
          </g>
        );
      })}

      {/* covers bars (on covers scale) */}
      {slice.map((d, i) => {
        const bh = (d.covers / covMax) * innerH * 0.55;
        const by = padT + innerH - bh;
        return (
          <g key={'bar' + i}>
            <rect
              x={x(i) - barW / 2}
              y={by}
              width={barW}
              height={bh}
              fill="var(--mc-leaf)"
              opacity="0.35"
            />
          </g>
        );
      })}

      {/* revenue area + line */}
      <path d={areaPath} fill="var(--mc-ember)" opacity="0.10" />
      <path d={linePath} fill="none" stroke="var(--mc-ember-700)" strokeWidth="2" />

      {/* points + value labels */}
      {slice.map((d, i) => {
        const isLast = i === slice.length - 1;
        const showLabel = isLast || i % Math.ceil(slice.length / 6) === 0;
        return (
          <g key={'pt' + i}>
            <circle cx={x(i)} cy={yRev(d.revenue)} r={isLast ? 5 : 3} fill="var(--mc-ember-700)" stroke="var(--mc-surface)" strokeWidth="1.5" />
            {showLabel && (
              <text x={x(i)} y={yRev(d.revenue) - 12} textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-muted)">
                €{(d.revenue / 1000).toFixed(1)}k
              </text>
            )}
          </g>
        );
      })}

      {/* x axis labels */}
      {slice.map((d, i) => {
        const date = new Date(d.date);
        const lbl = date.getDate() + '.' + (date.getMonth() + 1) + '.';
        return (
          <text key={'xl' + i} x={x(i)} y={h - padB + 16} textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-dim)">
            {lbl}
          </text>
        );
      })}

      {/* legend */}
      <g transform={`translate(${padL}, ${h - 6})`}>
        <rect x="0" y="-8" width="10" height="10" fill="var(--mc-leaf)" opacity="0.5" />
        <text x="16" y="0" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-muted)">COVERS</text>
        <line x1="80" x2="92" y1="-3" y2="-3" stroke="var(--mc-ember-700)" strokeWidth="2" />
        <circle cx="86" cy="-3" r="2.5" fill="var(--mc-ember-700)" />
        <text x="100" y="0" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-muted)">UMSATZ</text>
        <text x={innerW - 4} y="0" textAnchor="end" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--mc-ink-muted)">
          Ø TICKET {fmtEUR(avgTicket)}
        </text>
      </g>
    </svg>
  );
}

// Compact horizontal bar
function MiniBar({ value, max, color = 'var(--mc-leaf-700)', height = 6 }) {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div style={{ width: '100%', height, background: 'var(--mc-rule)' }}>
      <div style={{ width: pct + '%', height: '100%', background: color }} />
    </div>
  );
}

function DashboardScreen({ Topbar }) {
  const store = useStore();
  const [summary, setSummary] = React.useState(null);
  const [range, setRange] = React.useState(14);
  React.useEffect(() => { mcApi.get('/summary').then(setSummary); }, [store.tickets.length, store.reservations.length]);

  const now = new Date();
  const totalRange = store.txn.slice(-range).reduce((s, d) => s + d.revenue, 0);
  const totalCovers = store.txn.slice(-range).reduce((s, d) => s + d.covers, 0);
  const avgTicket = totalRange / Math.max(totalCovers, 1);

  // Forecast tonight: based on reservations + walk-in factor
  const reservedCovers = store.reservations.reduce((s, r) => s + r.party, 0);
  const walkInFactor = 1.45;
  const forecastCovers = Math.round(reservedCovers * walkInFactor);
  const forecastRevenue = Math.round(forecastCovers * avgTicket);

  // Live: tickets warning
  const ticketsWarn = store.tickets.filter(tk => (Date.now() - tk.opened) / 60000 > 15).length;

  // Cancellations / no-shows (mocked from data)
  const upcomingNext = [...store.reservations]
    .sort((a, b) => new Date(a.at) - new Date(b.at))
    .slice(0, 6);

  // Inventory low
  const lowStock = (store.inventory || []).filter(i => i.qty <= (i.parLevel || 0) * 0.4).slice(0, 4);

  // Staff present (clocked-in heuristic)
  const staffOnFloor = (store.staff || []).filter(s => ['Service', 'Küche', 'Bar'].includes(s.role)).slice(0, 12);

  // Top dishes counts
  const topCounts = [42, 36, 28, 24, 21, 18];
  const topMax = topCounts[0];

  return (
    <>
      <Topbar
        title="Dashboard"
        subtitle={`Mittwoch · ${fmtDATE(now)} · Service ${store.biz.opens}–${store.biz.closes}`}
        actions={
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Pill tone="leaf"><StatusDot tone="ok" /> Live</Pill>
            <div className="mc-chip">heute</div>
          </div>
        }
      />
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 28 }}>

        {/* HERO: 6 KPIs in einer Reihe */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginBottom: 12 }}>
          <KpiCard
            eyebrow="Tagesumsatz"
            value={summary ? fmtEUR(summary.revenue) : '—'}
            delta={summary?.revenueDelta}
            sub="vs. gestern"
            accent="var(--mc-ember-700)"
          />
          <KpiCard
            eyebrow="Gäste heute"
            value={summary ? fmtINT(summary.covers) : '—'}
            delta={summary?.coversDelta}
            sub="Covers"
            accent="var(--mc-leaf-700)"
          />
          <KpiCard
            eyebrow="Ø Ticket"
            value={summary ? fmtEUR(summary.revenue / Math.max(summary.covers,1)) : '—'}
            sub={`Ziel ${fmtEUR(58)}`}
            accent="var(--mc-info)"
          />
          <KpiCard
            eyebrow="Food-Cost"
            value={summary ? summary.foodCostPct.toFixed(1) + '%' : '—'}
            sub="Ziel 28.0%"
            accent={summary && summary.foodCostPct > 28 ? 'var(--mc-ember-700)' : 'var(--mc-leaf-700)'}
          />
          <KpiCard
            eyebrow="Labor-Cost"
            value={summary ? summary.laborCostPct.toFixed(1) + '%' : '—'}
            sub="Ziel 25.0%"
            accent={summary && summary.laborCostPct > 25 ? 'var(--mc-ember-700)' : 'var(--mc-leaf-700)'}
          />
          <KpiCard
            eyebrow="Profit-Marge"
            value={summary ? (100 - summary.foodCostPct - summary.laborCostPct - 22).toFixed(1) + '%' : '—'}
            sub="nach Fixkosten"
            accent="var(--mc-ink)"
          />
        </div>

        {/* Sekundäre KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginBottom: 20 }}>
          <KpiCard
            eyebrow="Reservierungen"
            value={summary ? fmtINT(summary.reservationsToday) : '—'}
            sub={`${reservedCovers} Gäste · 18:00–22:30`}
          />
          <KpiCard
            eyebrow="Auslastung"
            value={summary ? Math.round((summary.tablesSeated + summary.tablesReserved) / (summary.tablesSeated + summary.tablesReserved + summary.tablesOpen) * 100) + '%' : '—'}
            sub={`${summary?.tablesSeated || 0}/${(summary?.tablesSeated||0)+(summary?.tablesReserved||0)+(summary?.tablesOpen||0)} Tische belegt`}
          />
          <KpiCard
            eyebrow="Offene Tickets"
            value={summary ? fmtINT(summary.openTickets) : '—'}
            sub={ticketsWarn ? `${ticketsWarn} über 15 min` : 'alles im Plan'}
            accent={ticketsWarn ? 'var(--mc-ember-700)' : undefined}
          />
          <KpiCard
            eyebrow="No-Show-Quote"
            value="3.1%"
            delta={-0.8}
            sub="7-Tage-Schnitt"
          />
          <KpiCard
            eyebrow="Forecast Abend"
            value={fmtEUR(forecastRevenue)}
            sub={`~${forecastCovers} Covers erwartet`}
            accent="var(--mc-info)"
          />
          <KpiCard
            eyebrow="Catering-Pipeline"
            value={fmtEUR((store.events || []).reduce((s, e) => s + (e.total || 0), 0))}
            sub={`${(store.events || []).length} Events offen`}
          />
        </div>

        {/* CHART + Quick stats */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, marginBottom: 20 }}>
          <div className="mc-card" style={{ padding: 26 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
              <div>
                <div className="mc-eyebrow">Umsatz & Gäste</div>
                <div style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4 }}>
                  {fmtEUR(totalRange)} <span style={{ color: 'var(--mc-ink-dim)', fontSize: 14, fontWeight: 400 }}>· {fmtINT(totalCovers)} Gäste</span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                {[7, 14, 30].map(r => (
                  <button key={r} onClick={() => setRange(r)} className="mc-chip" style={{
                    cursor: 'pointer',
                    background: range === r ? 'var(--mc-ink)' : 'var(--mc-surface-2)',
                    color: range === r ? 'var(--mc-bg)' : 'var(--mc-ink-muted)',
                    borderColor: range === r ? 'var(--mc-ink)' : 'var(--mc-rule)',
                  }}>{r}T</button>
                ))}
              </div>
            </div>
            <RevenueChart data={store.txn} range={range} />
          </div>

          {/* Right column quick stats */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="mc-card" style={{ padding: 20 }}>
              <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Service heute</div>
              {[
                { l: 'Mittag', covers: 38, rev: 2240, cap: 60 },
                { l: 'Abend früh', covers: 52, rev: 3680, cap: 80 },
                { l: 'Abend spät', covers: 31, rev: 2410, cap: 80 },
              ].map(s => (
                <div key={s.l} style={{ marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 4 }}>
                    <span>{s.l}</span>
                    <span className="mc-mono mc-num" style={{ color: 'var(--mc-ink-muted)' }}>{s.covers} · {fmtEUR(s.rev)}</span>
                  </div>
                  <MiniBar value={s.covers} max={s.cap} />
                </div>
              ))}
            </div>

            <div className="mc-card" style={{ padding: 20 }}>
              <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Personal · Live</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {[
                  { l: 'Service', v: 6, plan: 7 },
                  { l: 'Küche', v: 5, plan: 5 },
                  { l: 'Bar', v: 2, plan: 2 },
                  { l: 'Empfang', v: 1, plan: 1 },
                ].map(p => (
                  <div key={p.l}>
                    <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{p.l}</div>
                    <div className="mc-num" style={{ fontSize: 22, fontWeight: 500, marginTop: 2 }}>
                      {p.v}<span style={{ color: 'var(--mc-ink-dim)', fontSize: 13 }}> / {p.plan}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Live Service Row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr', gap: 16, marginBottom: 20 }}>
          {/* Reservations next up */}
          <div className="mc-card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <div className="mc-eyebrow">Nächste Reservierungen</div>
              <div className="mc-eyebrow">{store.reservations.length}</div>
            </div>
            {upcomingNext.map(r => {
              const t = store.tables.find(x => x.id === r.tableId);
              return (
                <div key={r.id} style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--mc-rule)' }}>
                  <div className="mc-mono" style={{ width: 46, fontSize: 13, color: 'var(--mc-ink)' }}>{fmtTIME(new Date(r.at))}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{r.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>T{t?.label} · {r.party} Gäste</div>
                  </div>
                  <StatusDot tone={r.status === 'checked-in' ? 'ok' : r.status === 'waitlist' ? 'warn' : 'info'} />
                </div>
              );
            })}
          </div>

          {/* Open Tickets */}
          <div className="mc-card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <div className="mc-eyebrow">Offene Tickets</div>
              <div className="mc-eyebrow">{store.tickets.length}</div>
            </div>
            {store.tickets.slice(0, 6).map(tk => {
              const mins = Math.floor((Date.now() - tk.opened) / 60000);
              const warn = mins > 15;
              return (
                <div key={tk.id} style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--mc-rule)' }}>
                  <div className="mc-mono" style={{ width: 46, fontSize: 13, color: warn ? 'var(--mc-ember-700)' : 'var(--mc-ink)' }}>
                    {String(Math.floor(mins / 60)).padStart(2,'0')}:{String(mins % 60).padStart(2,'0')}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>Tisch {tk.table}</div>
                    <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>{tk.items.length} Pos · {tk.course}</div>
                  </div>
                  {warn && <Pill tone="ember">Warn</Pill>}
                </div>
              );
            })}
          </div>

          {/* Tables snapshot */}
          <div className="mc-card" style={{ padding: 22 }}>
            <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Tische · Live</div>
            <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 6 }}>
              {[
                { l: 'Besetzt', v: summary?.tablesSeated || 0, c: 'var(--mc-ember-700)' },
                { l: 'Reserviert', v: summary?.tablesReserved || 0, c: 'var(--mc-info)' },
                { l: 'Frei', v: summary?.tablesOpen || 0, c: 'var(--mc-leaf-700)' },
              ].map(x => (
                <div key={x.l} style={{ textAlign: 'center' }}>
                  <div className="mc-num" style={{ fontSize: 34, fontWeight: 500, letterSpacing: '-0.03em', color: x.c }}>{x.v}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 4 }}>{x.l}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 22, padding: 14, background: 'var(--mc-surface-2)' }}>
              <div className="mc-eyebrow">Nächste Events</div>
              {store.events.slice(0, 2).map(e => (
                <div key={e.id} style={{ marginTop: 8, fontSize: 13 }}>
                  <span className="mc-mono" style={{ color: 'var(--mc-leaf-700)' }}>{e.date.slice(5)}</span>
                  <span style={{ marginLeft: 10 }}>{e.name}</span>
                  <span style={{ color: 'var(--mc-ink-dim)', marginLeft: 6 }}>· {e.guests} Gäste</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Top Dishes mit Bars */}
        <div className="mc-card" style={{ padding: 26, marginBottom: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
            <div>
              <div className="mc-eyebrow">Top-Gerichte heute</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>Verkäufe & Marge</div>
            </div>
            <Pill>Top 6</Pill>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            {store.menu.slice(0, 6).map((m, i) => {
              const count = topCounts[i];
              const margin = (m.price - m.cost) / m.price * 100;
              return (
                <div key={m.id} style={{ padding: 16, background: 'var(--mc-surface-2)', border: '1px solid var(--mc-rule)' }}>
                  <div className="mc-num" style={{ fontSize: 26, fontWeight: 500 }}>{count}</div>
                  <div style={{ marginTop: 8, marginBottom: 10 }}>
                    <MiniBar value={count} max={topMax} color="var(--mc-ember-700)" />
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 500, lineHeight: 1.2 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 4 }}>{fmtEUR(m.price)} · {margin.toFixed(0)}% Marge</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Bottom Row: Lager-Warnung + Forecasts */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="mc-card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <div className="mc-eyebrow">Lager · Niedrig</div>
              <Pill tone={lowStock.length ? 'ember' : 'leaf'}>{lowStock.length} Pos.</Pill>
            </div>
            {lowStock.length === 0 ? (
              <div style={{ fontSize: 13, color: 'var(--mc-ink-dim)', padding: '12px 0' }}>Alle Bestände im grünen Bereich.</div>
            ) : lowStock.map(item => (
              <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--mc-rule)' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{item.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{item.qty} {item.unit} · Par {item.parLevel}</div>
                </div>
                <div style={{ width: 100 }}>
                  <MiniBar value={item.qty} max={item.parLevel} color="var(--mc-ember-700)" />
                </div>
              </div>
            ))}
          </div>

          <div className="mc-card" style={{ padding: 22 }}>
            <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Wochen-Forecast</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
              {['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].map((day, i) => {
                const heights = [55, 48, 70, 82, 95, 100, 62];
                const revs = [3.2, 2.8, 4.1, 4.8, 5.6, 5.9, 3.6];
                const isToday = i === 2;
                return (
                  <div key={day} style={{ textAlign: 'center' }}>
                    <div style={{ height: 90, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', marginBottom: 8 }}>
                      <div style={{
                        width: '70%',
                        height: heights[i] + '%',
                        background: isToday ? 'var(--mc-ember-700)' : 'var(--mc-leaf)',
                        opacity: isToday ? 1 : 0.6,
                      }} />
                    </div>
                    <div className="mc-mono" style={{ fontSize: 11, color: isToday ? 'var(--mc-ink)' : 'var(--mc-ink-dim)', fontWeight: isToday ? 600 : 400 }}>{day}</div>
                    <div className="mc-mono mc-num" style={{ fontSize: 11, color: 'var(--mc-ink-muted)', marginTop: 2 }}>€{revs[i]}k</div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--mc-rule)' }}>
              <div>
                <div className="mc-eyebrow">Wochenziel</div>
                <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 2 }}>€32.0k</div>
              </div>
              <div>
                <div className="mc-eyebrow">Forecast</div>
                <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 2, color: 'var(--mc-leaf-900)' }}>€30.0k</div>
              </div>
              <div>
                <div className="mc-eyebrow">Erreicht</div>
                <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 2 }}>94%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { DashboardScreen });