// ===== Auftragsanalyse — Hauptansicht (Auftragssicht) =====
const { useState: useAoS, useMemo: useAoM } = React;

const AO_COLS = [
  { key: 'nr', label: 'Auftr.-Nr.', type: 'text' },
  { key: 'bez', label: 'Auftragsbezeichnung', type: 'text' },
  { key: 'kunde', label: 'Kunde', type: 'text' },
  { key: 'abc', label: 'ABC', type: 'text' },
  { key: 'score', label: 'Score', type: 'num' },
  { key: 'system', label: 'Arbeitssystem', type: 'text' },
  { key: 'planStart', label: 'Plan-Start', type: 'date' },
  { key: 'istStart', label: 'Ist-Start', type: 'date' },
  { key: 'planEnde', label: 'Plan-Ende', type: 'date' },
  { key: 'istEnde', label: 'Ist-Ende', type: 'date' },
  { key: 'istDLZ', label: 'Ist-DLZ [Tage]', type: 'num' },
  { key: 'taZugang', label: 'TA Zugang [Tage]', type: 'num' },
  { key: 'taRel', label: 'TA rel [Tage]', type: 'num' },
  { key: 'taAbgang', label: 'TA Abgang [Tage]', type: 'num' },
  { key: 'istArbeit', label: 'Ist Arbeit [h]', type: 'num' },
  { key: 'status', label: 'Status', type: 'text' },
];

const aoFmt = (v, type) => {
  if (v == null || v === '') return '—';
  if (type === 'date') return window.aDe(v);
  if (type === 'num') return typeof v === 'number' ? v.toLocaleString('de-DE') : v;
  return v;
};

function AuftraegeView() {
  const all = window.A_ORDERS;
  const [sort, setSort] = useAoS({ key: 'nr', dir: 1 });
  const [colSearch, setColSearch] = useAoS({});          // per-column quick search
  const [qCol, setQCol] = useAoS('nr');                  // top search bar column
  const [qOp, setQOp] = useAoS('contains');
  const [qVal, setQVal] = useAoS('');
  const [page, setPage] = useAoS(0);
  const [perPage, setPerPage] = useAoS(25);
  const [filterOpen, setFilterOpen] = useAoS(false);
  const [dateFilter, setDateFilter] = useAoS({});        // {planStart:{von,bis}, ...}
  const [barFilter, setBarFilter] = useAoS(null);        // {field, min, max, bin, label} aus Balkenklick
  const [catFilter, setCatFilter] = useAoS(null);        // {key, title, label, donut, idx} aus Donut-Klick
  const [selRows, setSelRows] = useAoS(() => new Set()); // Strg-Klick Mehrfachauswahl

  // Filtern
  const filtered = useAoM(() => {
    let rows = all;
    // Top-Suchleiste
    if (qVal.trim()) {
      const col = AO_COLS.find(c => c.key === qCol);
      const q = qVal.trim().toLowerCase();
      rows = rows.filter(r => {
        const v = r[qCol]; if (v == null) return false;
        if (col.type === 'num') { const n = +v, t = +qVal; if (isNaN(t)) return true; return qOp === '=' ? n === t : qOp === '>' ? n > t : qOp === '<' ? n < t : String(v).includes(qVal); }
        const sv = String(v).toLowerCase();
        return qOp === '=' ? sv === q : sv.includes(q);
      });
    }
    // Pro-Spalten-Suche
    Object.entries(colSearch).forEach(([k, val]) => {
      if (!val || !val.trim()) return;
      const q = val.trim().toLowerCase();
      rows = rows.filter(r => r[k] != null && String(r[k]).toLowerCase().includes(q));
    });
    // Zeitfilter (von–bis)
    Object.entries(dateFilter).forEach(([k, range]) => {
      if (!range) return;
      if (range.von) rows = rows.filter(r => r[k] && r[k] >= range.von);
      if (range.bis) rows = rows.filter(r => r[k] && r[k] <= range.bis);
    });
    // Balken-Filter (Klick auf Histogramm) — dlzAbw ist berechnet
    if (barFilter) {
      rows = rows.filter(r => {
        const v = barFilter.field === 'dlzAbw' ? (r.istEnde ? r.istDLZ - r.planDLZ : null) : r[barFilter.field];
        return v != null && v >= barFilter.min && v <= barFilter.max;
      });
    }
    // Kategorie-Filter (Klick auf Donut)
    if (catFilter) {
      if (catFilter.key === 'status') rows = rows.filter(r => r.status === catFilter.val);
      else if (catFilter.key === 'treue') rows = rows.filter(r => r.istEnde && (catFilter.val === 'ontime' ? r.taAbgang <= 0 : r.taAbgang > 0));
      else if (catFilter.key === 'abc') rows = rows.filter(r => r.abc === catFilter.val);
    }
    return rows;
  }, [all, qCol, qOp, qVal, colSearch, dateFilter, barFilter, catFilter]);

  const sorted = useAoM(() => {
    const c = AO_COLS.find(x => x.key === sort.key);
    const arr = filtered.slice();
    arr.sort((a, b) => {
      let va = a[sort.key], vb = b[sort.key];
      if (va == null) va = c.type === 'num' ? -Infinity : ''; if (vb == null) vb = c.type === 'num' ? -Infinity : '';
      if (c.type === 'num') return (va - vb) * sort.dir;
      return String(va).localeCompare(String(vb)) * sort.dir;
    });
    return arr;
  }, [filtered, sort]);

  const pageRows = sorted.slice(page * perPage, page * perPage + perPage);
  const pages = Math.ceil(sorted.length / perPage) || 1;
  const activeDateFilters = Object.values(dateFilter).filter(r => r && (r.von || r.bis)).length;

  // Diagramm-Daten aus gefilterten Aufträgen (bei Strg-Auswahl nur die ausgewählten)
  const chartSrc = useAoM(() => selRows.size ? filtered.filter(r => selRows.has(r.nr)) : filtered, [filtered, selRows]);
  const charts = useAoM(() => {
    const fert = chartSrc.filter(r => r.status === 'Fertiggemeldet');
    const lauf = chartSrc.filter(r => r.status === 'Laufend');
    const withEnd = chartSrc.filter(r => r.istEnde);
    const ontime = withEnd.filter(r => r.taAbgang <= 0).length;
    const treuePct = withEnd.length ? Math.round(ontime / withEnd.length * 100) : 0;
    const m = (arr) => arr.length ? arr.reduce((s, x) => s + x, 0) / arr.length : 0;
    const sd = (arr) => { if (arr.length < 2) return 0; const mm = m(arr); return Math.sqrt(arr.reduce((s, x) => s + (x - mm) ** 2, 0) / (arr.length - 1)); };
    const dlz = chartSrc.map(r => r.istDLZ);
    const dlzAbw = withEnd.map(r => r.istDLZ - r.planDLZ);
    const planArb = chartSrc.map(r => r.planArbeit);
    const taZ = chartSrc.map(r => r.taZugang);
    const taA = withEnd.map(r => r.taAbgang);
    const abcTreue = ['A', 'B', 'C'].map(abc => {
      const grp = withEnd.filter(r => r.abc === abc);
      const ot = grp.filter(r => r.taAbgang <= 0).length;
      return { abc, total: grp.length, ontime: ot, pct: grp.length ? Math.round(ot / grp.length * 100) : 0 };
    }).filter(d => d.total > 0);
    return {
      fert: fert.length, lauf: lauf.length, treuePct, ontime, mitTA: withEnd.length - ontime, abcTreue,
      planDates: fert.map(r => r.planEnde), istDates: withEnd.map(r => r.istEnde),
      dlz, dlzMean: m(dlz), dlzSd: sd(dlz),
      dlzAbw, dlzAbwMean: m(dlzAbw), dlzAbwSd: sd(dlzAbw),
      planArb, planArbMean: m(planArb), planArbSd: sd(planArb),
      taZ, taZMean: m(taZ), taZSd: sd(taZ),
      taA, taAMean: m(taA), taASd: sd(taA),
    };
  }, [chartSrc]);

  const setRange = (k, which, val) => setDateFilter(f => ({ ...f, [k]: { ...(f[k] || {}), [which]: val } }));

  const onBar = (field, title) => (min, max, bin, label) => { setCatFilter(null); setBarFilter(b => (b && b.field === field && b.bin === bin) ? null : { field, min, max, bin, label, title }); setPage(0); };
  const abBin = (field) => (barFilter && barFilter.field === field) ? barFilter.bin : null;
  const abReset = (field) => (barFilter && barFilter.field === field) ? () => setBarFilter(null) : null;
  // Donut-Klick → Kategorie-Filter
  const onDonut = (key, title) => (seg, idx) => { setBarFilter(null); setCatFilter(c => (c && c.key === key && c.idx === idx) ? null : { key, title, label: seg.label, val: seg.val, idx }); setPage(0); };
  const dIdx = (key) => (catFilter && catFilter.key === key) ? catFilter.idx : null;
  const dReset = (key) => (catFilter && catFilter.key === key) ? () => setCatFilter(null) : null;

  return (
    <React.Fragment>
      <header style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 14, padding: '0 18px', height: 56, background: 'var(--panel)', borderBottom: '1px solid var(--line-2)' }}>
        <span style={{ fontSize: 14.5, fontWeight: 600 }}>Auftragssicht</span>
        <span className="label">{filtered.length.toLocaleString('de-DE')} von {all.length.toLocaleString('de-DE')} Aufträgen</span>
        {(barFilter || catFilter) && (() => { const f = barFilter || catFilter; return (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 28, padding: '0 6px 0 11px', borderRadius: 99, background: 'var(--accent)', border: '1px solid var(--accent-line)', color: 'var(--accent-ink)', fontSize: 12, fontWeight: 600 }}>
            {f.title}: {f.label}
            <button onClick={() => { setBarFilter(null); setCatFilter(null); }} title="Filter entfernen" style={{ display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 99, border: 'none', cursor: 'pointer', background: 'color-mix(in oklch, var(--accent-ink) 18%, transparent)', color: 'var(--accent-ink)' }}>
              <Icon name="close" size={12} />
            </button>
          </span>
        ); })()}
        {selRows.size > 0 && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 28, padding: '0 6px 0 11px', borderRadius: 99, background: '#3269B4', border: '1px solid #3269B4', color: '#fff', fontSize: 12, fontWeight: 600 }}>
            {selRows.size} ausgewählt · Diagramme gefiltert
            <button onClick={() => setSelRows(new Set())} title="Auswahl aufheben" style={{ display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 99, border: 'none', cursor: 'pointer', background: 'rgba(255,255,255,.25)', color: '#fff' }}>
              <Icon name="close" size={12} />
            </button>
          </span>
        )}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={() => setFilterOpen(true)} title="Zeitfilter" style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 7, height: 34, padding: '0 13px', borderRadius: 99, border: 'none', cursor: 'pointer', background: '#3269B4', color: '#fff', fontSize: 12.5, fontWeight: 600 }}>
            <Icon name="filter" size={15} /> Zeitfilter
            {activeDateFilters > 0 && <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 10, background: '#fff', color: '#3269B4', borderRadius: 99, padding: '0 5px', fontWeight: 700 }}>{activeDateFilters}</span>}
          </button>
        </div>
      </header>

      <main style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Tabelle */}
        <div style={{ flexShrink: 0, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 8, boxShadow: 'var(--shadow)', overflow: 'hidden' }}>
          {/* Suchleiste */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--line)' }}>
            <select value={qCol} onChange={e => { setQCol(e.target.value); setPage(0); }} style={aoSel}>
              {AO_COLS.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
            </select>
            <select value={qOp} onChange={e => setQOp(e.target.value)} style={{ ...aoSel, width: 64 }}>
              <option value="contains">enthält</option>
              <option value="=">=</option>
              <option value=">">&gt;</option>
              <option value="<">&lt;</option>
            </select>
            <div style={{ position: 'relative', flex: 1 }}>
              <input value={qVal} onChange={e => { setQVal(e.target.value); setPage(0); }} placeholder="Suchen…" style={{ width: '100%', height: 38, boxSizing: 'border-box', padding: '0 12px', borderRadius: 8, border: '1px solid var(--line-2)', background: 'var(--surface)', fontSize: 13, color: 'var(--ink)' }} />
            </div>
            {(qVal || Object.values(colSearch).some(v => v)) && <button onClick={() => { setQVal(''); setColSearch({}); }} style={aoGhost}>Zurücksetzen</button>}
          </div>
          {/* Tabelle */}
          <div style={{ overflow: 'auto', maxHeight: 420 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, minWidth: 1200 }}>
              <thead>
                <tr>
                  {AO_COLS.map(c => {
                    const active = sort.key === c.key;
                    return (
                      <th key={c.key} style={{ ...window.thStyle, textAlign: c.type === 'num' ? 'right' : 'left', cursor: 'pointer', whiteSpace: 'nowrap', color: active ? 'var(--accent-ink)' : 'var(--muted)' }}
                        onClick={() => setSort(s => s.key === c.key ? { key: c.key, dir: -s.dir } : { key: c.key, dir: 1 })}>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>{c.label}<span style={{ opacity: active ? 1 : 0.3 }}>{active ? (sort.dir === 1 ? '▲' : '▼') : '⇅'}</span></span>
                      </th>
                    );
                  })}
                </tr>
                <tr>
                  {AO_COLS.map(c => (
                    <th key={c.key} style={{ padding: '3px 8px 6px', background: 'var(--panel)', position: 'sticky', top: 30, borderBottom: '1px solid var(--line-2)' }}>
                      <input value={colSearch[c.key] || ''} onChange={e => { setColSearch(s => ({ ...s, [c.key]: e.target.value })); setPage(0); }} placeholder="filtern…"
                        style={{ width: '100%', height: 24, boxSizing: 'border-box', padding: '0 6px', fontSize: 11, fontFamily: c.type === 'num' ? 'var(--mono)' : 'inherit', border: '1px solid var(--line)', borderRadius: 4, background: 'var(--surface-2)', color: 'var(--ink)' }} />
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {pageRows.map((r, i) => {
                  const sel = selRows.has(r.nr);
                  return (
                  <tr key={r.nr} onClick={(e) => { const multi = e.ctrlKey || e.metaKey; setSelRows(s => { const n = multi ? new Set(s) : new Set(); if (s.has(r.nr) && (multi || s.size === 1)) n.delete(r.nr); else n.add(r.nr); return n; }); }}
                    onContextMenu={(e) => window.kikiMenu(e, { id: r.nr, label: `${r.nr} · ${r.bez}`, kind: 'Auftrag' })}
                    style={{ borderBottom: '1px solid var(--line)', cursor: 'pointer', background: sel ? 'color-mix(in oklch, var(--accent) 30%, transparent)' : 'transparent', boxShadow: sel ? 'inset 3px 0 0 #3269B4' : 'none' }}>
                    {AO_COLS.map(c => (
                      <td key={c.key} style={{ padding: '7px 10px', whiteSpace: 'nowrap', textAlign: c.type === 'num' ? 'right' : 'left',
                        fontFamily: (c.type === 'num' || c.type === 'date' || c.key === 'nr') ? 'var(--mono)' : 'inherit',
                        fontVariantNumeric: 'tabular-nums', fontWeight: c.key === 'nr' ? 600 : 400,
                        color: c.key === 'taAbgang' && r.taAbgang > 0 ? 'var(--bad-ink)' : c.key === 'taAbgang' && r.taAbgang < 0 ? 'var(--good-ink)' : 'var(--ink)' }}>
                        {c.key === 'status'
                          ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: r.status === 'Laufend' ? 'var(--warn-ink)' : 'var(--ink-2)' }}><span style={{ width: 7, height: 7, borderRadius: 99, background: r.status === 'Laufend' ? 'var(--warn-ink)' : 'var(--good-ink)' }} />{r.status}</span>
                          : c.key === 'abc'
                          ? <span className="num" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 18, borderRadius: 4, fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700, background: r.abc === 'A' ? 'color-mix(in oklch, var(--good) 55%, var(--surface))' : r.abc === 'B' ? 'color-mix(in oklch, var(--warn) 55%, var(--surface))' : 'var(--line)', color: r.abc === 'A' ? 'var(--good-ink)' : r.abc === 'B' ? 'var(--warn-ink)' : 'var(--ink-2)' }}>{r.abc}</span>
                          : c.key === 'score'
                          ? <ScoreBadge value={r.score} size="sm" />
                          : aoFmt(r[c.key], c.type)}
                      </td>
                    ))}
                  </tr>
                  );
                })}
                {pageRows.length === 0 && <tr><td colSpan={AO_COLS.length} style={{ padding: 28, textAlign: 'center', color: 'var(--muted)' }}>Keine Aufträge im Filter</td></tr>}
              </tbody>
            </table>
          </div>
          {/* Pagination */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 16, padding: '8px 14px', borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--ink-2)' }}>
            <span>Zeilen/Seite</span>
            <select value={perPage} onChange={e => { setPerPage(+e.target.value); setPage(0); }} style={{ ...aoSel, width: 64, height: 30 }}>
              {[10, 25, 50, 100].map(n => <option key={n} value={n}>{n}</option>)}
            </select>
            <span className="num" style={{ fontFamily: 'var(--mono)' }}>{sorted.length ? page * perPage + 1 : 0}–{Math.min((page + 1) * perPage, sorted.length)} von {sorted.length.toLocaleString('de-DE')}</span>
            <div style={{ display: 'flex', gap: 4 }}>
              <button onClick={() => setPage(0)} disabled={page === 0} style={aoPg}>⏮</button>
              <button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0} style={aoPg}>‹</button>
              <button onClick={() => setPage(p => Math.min(pages - 1, p + 1))} disabled={page >= pages - 1} style={aoPg}>›</button>
              <button onClick={() => setPage(pages - 1)} disabled={page >= pages - 1} style={aoPg}>⏭</button>
            </div>
          </div>
        </div>

        {/* Diagramm-Raster — alle Karten gleich groß */}
        <div style={{ flexShrink: 0, display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 14 }}>
          <ChartCard title="Anzahl Aufträge" sub={(charts.fert + charts.lauf).toLocaleString('de-DE')} onReset={dReset('status')}>
            <Donut centerLabel={(charts.fert + charts.lauf).toLocaleString('de-DE')} onSeg={onDonut('status', 'Status')} activeIdx={dIdx('status')} segments={[{ label: 'Fertiggemeldet', value: charts.fert, color: window.AOChartColors.ACCENT, val: 'Fertiggemeldet' }, { label: 'Laufend', value: charts.lauf, color: window.AOChartColors.GREY, val: 'Laufend' }]} />
          </ChartCard>
          <ChartCard title="Rückstand" sub={`${charts.lauf} laufend`}>
            <CumLine planDates={charts.planDates} istDates={charts.istDates} />
          </ChartCard>
          <ChartCard title="Termintreue" sub={`${charts.treuePct} %`} onReset={dReset('treue')}>
            <Donut centerLabel={`${charts.treuePct}%`} onSeg={onDonut('treue', 'Termintreue')} activeIdx={dIdx('treue')} segments={[{ label: 'termintreu', value: charts.ontime, color: window.AOChartColors.ACCENT, val: 'ontime' }, { label: 'verspätet', value: charts.mitTA, color: window.AOChartColors.GREY, val: 'late' }]} />
          </ChartCard>
          <ChartCard title="Planzeiten (Ist-Arbeit)" sub={`M ${charts.planArbMean.toFixed(0)} h · SD ${charts.planArbSd.toFixed(0)} h`} onReset={abReset('istArbeit')}>
            <Histogram values={charts.planArb} unit="in h" onBar={onBar('istArbeit', 'Ist-Arbeit')} activeBin={abBin('istArbeit')} />
          </ChartCard>
          <ChartCard title="Durchlaufzeit" sub={`M ${charts.dlzMean.toFixed(0)} T · SD ${charts.dlzSd.toFixed(0)} T`} onReset={abReset('istDLZ')}>
            <Histogram values={charts.dlz} unit="in Tagen" onBar={onBar('istDLZ', 'Durchlaufzeit')} activeBin={abBin('istDLZ')} />
          </ChartCard>
          <ChartCard title="Termintreue nach ABC-Kunden" sub="Anteil termintreu je Segment" onReset={dReset('abc')}>
            <ABCBars data={charts.abcTreue} onBar={(abc) => { setBarFilter(null); setCatFilter(c => (c && c.key === 'abc' && c.idx === abc) ? null : { key: 'abc', title: 'ABC', label: abc + '-Kunden', val: abc, idx: abc }); setPage(0); }} activeKey={catFilter && catFilter.key === 'abc' ? catFilter.val : null} />
          </ChartCard>
          <ChartCard title="Terminabweichung Zugang" sub={`M ${charts.taZMean.toFixed(0)} T · SD ${charts.taZSd.toFixed(0)} T`} onReset={abReset('taZugang')}>
            <Histogram values={charts.taZ} unit="in Tagen" color={window.AOChartColors.ACCENT_D} onBar={onBar('taZugang', 'Terminabw. Zugang')} activeBin={abBin('taZugang')} />
          </ChartCard>
          <ChartCard title="Durchlaufzeitabweichung" sub={`M ${charts.dlzAbwMean.toFixed(0)} T · SD ${charts.dlzAbwSd.toFixed(0)} T`} onReset={abReset('dlzAbw')}>
            <Histogram values={charts.dlzAbw} unit="in Tagen" color={window.AOChartColors.ACCENT_D} onBar={onBar('dlzAbw', 'Durchlaufzeitabw.')} activeBin={abBin('dlzAbw')} />
          </ChartCard>
          <ChartCard title="Terminabweichung Abgang" sub={`M ${charts.taAMean.toFixed(0)} T · SD ${charts.taASd.toFixed(0)} T`} onReset={abReset('taAbgang')}>
            <Histogram values={charts.taA} unit="in Tagen" color={window.AOChartColors.ACCENT_D} onBar={onBar('taAbgang', 'Terminabw. Abgang')} activeBin={abBin('taAbgang')} />
          </ChartCard>
        </div>
      </main>

      {/* Zeitfilter Slide-Over */}
      {filterOpen && (
        <>
          <div onClick={() => setFilterOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(63,62,61,.28)', zIndex: 50, animation: 'rowIn .15s' }} />
          <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 380, background: 'var(--surface)', zIndex: 51, boxShadow: '-12px 0 40px rgba(63,62,61,.16)', borderLeft: '1px solid var(--line-2)', display: 'flex', flexDirection: 'column', animation: 'aoSlide .26s cubic-bezier(.2,.8,.2,1)' }}>
            <style>{`@keyframes aoSlide{from{transform:translateX(100%)}to{transform:none}}`}</style>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
              <Icon name="filter" size={17} style={{ color: 'var(--ink-2)' }} />
              <div style={{ fontWeight: 600, fontSize: 15 }}>Filter</div>
              <button onClick={() => setFilterOpen(false)} style={{ marginLeft: 'auto', width: 30, height: 30, border: '1px solid var(--line-2)', borderRadius: 6, background: 'var(--surface)', display: 'grid', placeItems: 'center', color: 'var(--ink-2)', cursor: 'pointer' }}><Icon name="close" size={15} /></button>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[['planStart', 'Plan-Start'], ['planEnde', 'Plan-Ende'], ['istStart', 'Ist-Start'], ['istEnde', 'Ist-Ende']].map(([k, lbl]) => (
                <div key={k} style={{ border: '1px solid var(--line-2)', borderRadius: 9, padding: '11px 13px', background: 'var(--surface)' }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--ink-2)', marginBottom: 8 }}>{lbl} von – bis</div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <input type="date" value={(dateFilter[k] || {}).von || ''} onChange={e => setRange(k, 'von', e.target.value)} style={aoDate} />
                    <input type="date" value={(dateFilter[k] || {}).bis || ''} onChange={e => setRange(k, 'bis', e.target.value)} style={aoDate} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, padding: '14px 20px', borderTop: '1px solid var(--line)' }}>
              <button onClick={() => setDateFilter({})} style={{ ...aoGhost, flex: 1, height: 36 }}>Alle zurücksetzen</button>
              <button onClick={() => setFilterOpen(false)} style={{ flex: 1, height: 36, borderRadius: 8, border: 'none', background: '#3269B4', color: '#fff', fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>Anwenden</button>
            </div>
          </div>
        </>
      )}
    </React.Fragment>
  );
}

const aoSel = { height: 38, padding: '0 10px', borderRadius: 8, border: '1px solid var(--line-2)', background: 'var(--surface)', fontSize: 13, color: 'var(--ink)', fontFamily: 'inherit' };
const aoGhost = { height: 34, padding: '0 12px', borderRadius: 8, border: '1px solid var(--line-2)', background: 'var(--surface)', color: 'var(--ink-2)', fontSize: 12.5, cursor: 'pointer' };
const aoPg = { width: 30, height: 30, borderRadius: 6, border: '1px solid var(--line-2)', background: 'var(--surface)', color: 'var(--ink-2)', cursor: 'pointer', fontSize: 13 };
const aoDate = { flex: 1, minWidth: 0, height: 32, boxSizing: 'border-box', padding: '0 8px', fontFamily: 'var(--mono)', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 6, background: 'var(--surface-2)', color: 'var(--ink)' };

Object.assign(window, { AuftraegeView });