/* global React, Icon, Badge, Tag, Avatar, Button, Field, Toggle, Tabs, Segmented, Card, Metric, Modal, Pager, AreaChart, BarChart, DonutCard, Gauge, Sparkline, ProgressBar */

var { useState: useState_d, useMemo: useMemo_d } = React;

// ============================================================
// PAGE: DASHBOARD (Overview) — multi-service breakdown
// ============================================================
function PageDashboardNew({ onNav }) {
  const [range, setRange] = useState_d("12m");
  const [sectorFilter, setSectorFilter] = useState_d("");
  const [marketFilter, setMarketFilter] = useState_d("");
  const [countryFilter, setCountryFilter] = useState_d("");
  const [agencyFilter, setAgencyFilter] = useState_d("");
  const [managerFilter, setManagerFilter] = useState_d("");
  const [groupFilter, setGroupFilter] = useState_d("");
  const [filtersVisible, setFiltersVisible] = useState_d(true);
  const [datePickerOpen, setDatePickerOpen] = useState_d(false);
  const [bookings, setBookings] = useState_d((window.MOCK && window.MOCK.BOOKINGS) || []);
  const [agencies, setAgencies] = useState_d((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  // Backend-truth totals from /reporting/overview/*: total bookings, total
  // revenue, financial info (unpaid orders + rebooking savings). Hitting
  // these is much cheaper than walking all booking pages, and they're the
  // source of truth for the dashboard KPIs.
  const [reportingBookings, setReportingBookings] = useState_d(null);
  const [reportingRevenue, setReportingRevenue] = useState_d(null);
  const [reportingFinancial, setReportingFinancial] = useState_d(null);

  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getBookings().then((rows) => { if (rows && rows.length) setBookings(rows); });
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAgencies(rows); });
    window.TrekkoAPI.getReportingBookingsStats().then(setReportingBookings);
    window.TrekkoAPI.getReportingRevenueStats().then(setReportingRevenue);
    window.TrekkoAPI.getReportingFinancialInfo().then(setReportingFinancial);
  }, []);

  const fmtEUR = (v) => "€" + (v >= 1000 ? (v / 1000).toFixed(v >= 10000 ? 0 : 1) + "k" : v);
  const fmtEURFull = (v) => {
    if (v >= 1e6) return "€" + (v / 1e6).toFixed(2) + "M";
    if (v >= 1e3) return "€" + (v / 1e3).toFixed(1) + "k";
    return "€" + Math.round(v);
  };

  const kpis = useMemo_d(() => {
    // Source of truth: /reporting/overview/* endpoints. Backend already
    // computes these aggregations - we read them directly. bookings/agencies
    // local state still feeds Today's Arrivals, tables, etc.
    const totalBookings = (reportingBookings && reportingBookings.total_bookings && reportingBookings.total_bookings.total_bookings) || bookings.length || 0;
    const totalRevenue = (reportingRevenue && reportingRevenue.total_revenue) || 0;
    const avgValue = totalBookings ? totalRevenue / totalBookings : 0;
    const profit = totalRevenue * 0.3; // 30% net-margin proxy
    const activeAgencies = agencies.filter((a) => a.status === "Active" || a.status === "Verified").length || agencies.length;
    // Cancellations: backend financial_info has unpaid_orders, but explicit
    // cancellation count comes from getBookings backendTotals.Cancelled
    // when available, else falls back to the loaded sample.
    const cancelledFromBackend = bookings.backendTotals && bookings.backendTotals.Cancelled;
    const cancellations = cancelledFromBackend != null ? cancelledFromBackend : bookings.filter((b) => b.status === "Cancelled").length;
    const overdueDebt = (reportingFinancial && reportingFinancial.unpaid_orders && reportingFinancial.unpaid_orders.overdue_debt) || 0;
    const cancelRate = totalBookings ? (cancellations / totalBookings) * 100 : 0;
    return { totalRevenue, totalBookings, avgValue, profit, activeAgencies, cancellations, cancelledValue: overdueDebt, cancelRate };
  }, [bookings, agencies, reportingBookings, reportingRevenue, reportingFinancial]);

  return (
    <div data-comment-anchor="72c2d8dc65-div-19-5" style={{ position: "relative" }}>
      <div className="page-head">
        <div>
          <h1 className="page-head__title" data-comment-anchor="0081873d55-h1-25-11">Dashboard</h1>
          <div className="page-head__sub">Business overview across all services — Hotels, Car Rental, Transfers, VIP Lounge & Airport Services</div>
        </div>
        <div className="page-head__actions">
          <Segmented value={range} onChange={(v) => {setRange(v);if (v === "custom") setDatePickerOpen(true);else setDatePickerOpen(false);}} options={[
          { value: "1d", label: "Day" }, { value: "7d", label: "Week" },
          { value: "30d", label: "Month" }, { value: "qtd", label: "QTD" },
          { value: "ytd", label: "YTD" }, { value: "custom", label: "Custom" }]
          } />
        </div>
      </div>

      {/* Custom date-range calendar */}
      {datePickerOpen ?
      <Card style={{ position: "absolute", right: 18, top: 84, zIndex: 100, minWidth: 320, boxShadow: "0 4px 16px rgba(0,0,0,0.12)" }}>
          <div className="bold" style={{ marginBottom: 12 }}>Select custom date range</div>
          <div className="grid grid--2" style={{ gap: 12 }}>
            <Field label="From"><input className="input" type="date" defaultValue="2024-10-01" /></Field>
            <Field label="To"><input className="input" type="date" defaultValue="2024-12-31" /></Field>
          </div>
          <div className="row" style={{ marginTop: 14, justifyContent: "flex-end", gap: 8 }}>
            <Button kind="ghost" onClick={() => setDatePickerOpen(false)}>Cancel</Button>
            <Button kind="primary" onClick={() => setDatePickerOpen(false)}>Apply</Button>
          </div>
        </Card> :
      null}

      {/* Global filters */}
      <div className="row" style={{ marginBottom: 12 }} data-comment-anchor="ec032e748c-div-58-7">
        <Button kind="ghost" size="sm" icon={filtersVisible ? <Icon.ChevronUp /> : <Icon.ChevronDown />} onClick={() => setFiltersVisible(!filtersVisible)}>
          {filtersVisible ? "Hide filters" : "Show filters"}
        </Button>
      </div>
      {filtersVisible &&
      <div className="filter-bar" style={{ marginBottom: 18 }} data-comment-anchor="298e263ab5-div-64-9">
          <select className="select" value={sectorFilter} onChange={(e) => setSectorFilter(e.target.value)} style={{ minWidth: 180 }} data-comment-anchor="d83516077e-select-37-9">
            <option value="">All sectors</option>
            <option value="hotels">🏨 Hotels</option>
            <option value="car">🚗 Car Rental</option>
            <option value="transfer">🚕 Transfer</option>
            <option value="lounge">✈️ Airport Lounge</option>
            <option value="vipairport">⭐ VIP Services Airport</option>
            <option value="tours">🗺️ Private Tours</option>
          </select>
          <select className="select" value={marketFilter} onChange={(e) => setMarketFilter(e.target.value)} style={{ minWidth: 140 }}>
            <option value="">All markets</option>
            <option>Iberia</option><option>DACH</option><option>UK</option><option>France</option><option>Nordics</option><option>Italy</option>
          </select>
          <select className="select" value={countryFilter} onChange={(e) => setCountryFilter(e.target.value)} style={{ minWidth: 160 }} data-comment-anchor="87fe66e398-select-78-11">
            <option value="">All countries</option>
            <option value="ES">🇪🇸 Spain</option><option value="FR">🇫🇷 France</option><option value="GB">🇬🇧 United Kingdom</option>
            <option value="DE">🇩🇪 Germany</option><option value="IT">🇮🇹 Italy</option><option value="SE">🇸🇪 Sweden</option>
            <option value="DK">🇩🇰 Denmark</option><option value="NO">🇳🇴 Norway</option><option value="PT">🇵🇹 Portugal</option>
            <option value="NL">🇳🇱 Netherlands</option><option value="BE">🇧🇪 Belgium</option><option value="CH">🇨🇭 Switzerland</option>
            <option value="AT">🇦🇹 Austria</option><option value="GR">🇬🇷 Greece</option><option value="PL">🇵🇱 Poland</option>
            <option value="US">🇺🇸 USA</option><option value="CA">🇨🇦 Canada</option><option value="MX">🇲🇽 Mexico</option>
            <option value="BR">🇧🇷 Brazil</option><option value="AR">🇦🇷 Argentina</option><option value="AE">🇦🇪 UAE</option>
            <option value="SA">🇸🇦 Saudi Arabia</option><option value="JP">🇯🇵 Japan</option><option value="CN">🇨🇳 China</option>
            <option value="SG">🇸🇬 Singapore</option><option value="AU">🇦🇺 Australia</option>
          </select>
          <select className="select" style={{ minWidth: 160 }} data-comment-anchor="f9e71aa712-select-49-9">
            <option value="">All cities</option>
            {!countryFilter && <option disabled>— Select country first —</option>}
            {countryFilter === "ES" && <><option>Madrid</option><option>Barcelona</option><option>Seville</option><option>Valencia</option><option>Málaga</option></>}
            {countryFilter === "FR" && <><option>Paris</option><option>Lyon</option><option>Marseille</option><option>Nice</option></>}
            {countryFilter === "GB" && <><option>London</option><option>Manchester</option><option>Edinburgh</option><option>Birmingham</option></>}
            {countryFilter === "DE" && <><option>Berlin</option><option>Munich</option><option>Frankfurt</option><option>Hamburg</option></>}
            {countryFilter === "IT" && <><option>Rome</option><option>Milan</option><option>Florence</option><option>Venice</option></>}
            {countryFilter === "SE" && <><option>Stockholm</option><option>Gothenburg</option><option>Malmö</option></>}
            {countryFilter === "DK" && <><option>Copenhagen</option><option>Aarhus</option></>}
            {countryFilter === "NO" && <><option>Oslo</option><option>Bergen</option></>}
            {countryFilter === "PT" && <><option>Lisbon</option><option>Porto</option></>}
            {countryFilter === "NL" && <><option>Amsterdam</option><option>Rotterdam</option></>}
            {countryFilter === "BE" && <><option>Brussels</option><option>Antwerp</option></>}
            {countryFilter === "CH" && <><option>Zurich</option><option>Geneva</option></>}
            {countryFilter === "AT" && <><option>Vienna</option><option>Salzburg</option></>}
            {countryFilter === "GR" && <><option>Athens</option><option>Thessaloniki</option></>}
            {countryFilter === "US" && <><option>New York</option><option>Los Angeles</option><option>Miami</option><option>Chicago</option></>}
            {countryFilter === "CA" && <><option>Toronto</option><option>Vancouver</option></>}
            {countryFilter === "MX" && <><option>Mexico City</option><option>Cancún</option></>}
            {countryFilter === "BR" && <><option>São Paulo</option><option>Rio de Janeiro</option></>}
            {countryFilter === "AE" && <><option>Dubai</option><option>Abu Dhabi</option></>}
            {countryFilter === "JP" && <><option>Tokyo</option><option>Osaka</option></>}
            {countryFilter === "CN" && <><option>Shanghai</option><option>Beijing</option></>}
            {countryFilter === "SG" && <><option>Singapore</option></>}
            {countryFilter === "AU" && <><option>Sydney</option><option>Melbourne</option></>}
          </select>
          <select className="select" value={agencyFilter} onChange={(e) => setAgencyFilter(e.target.value)} style={{ minWidth: 200 }}>
            <option value="">All agencies</option>
            {window.MOCK.TRAVEL_AGENCIES.slice(0, 10).map((a) => <option key={a.id}>{a.name}</option>)}
          </select>
          <select className="select" value={managerFilter} onChange={(e) => setManagerFilter(e.target.value)} style={{ minWidth: 160 }}>
            <option value="">All sales managers</option>
            <option>Ryan Hou</option><option>Maria Lopez</option><option>Hannah Briggs</option><option>Juan Salazar</option>
          </select>
          <select className="select" value={groupFilter} onChange={(e) => setGroupFilter(e.target.value)} style={{ minWidth: 180 }}>
            <option value="">All travel groups</option>
            {(window.MOCK.TRAVEL_GROUPS || []).map((g) => <option key={g.id}>{g.name}</option>)}
          </select>
          <span className="spacer" />
          {(sectorFilter || marketFilter || countryFilter || agencyFilter || managerFilter || groupFilter) &&
        <Button kind="ghost" size="sm" icon={<Icon.X />} onClick={() => {setSectorFilter("");setMarketFilter("");setCountryFilter("");setAgencyFilter("");setManagerFilter("");setGroupFilter("");}}>Clear filters</Button>
        }
        </div>
      }

      {/* REPORT OVERVIEW — 4 mini bar charts */}
      {/* BUSINESS OVERVIEW */}
      <div className="row" style={{ marginBottom: 12 }} data-comment-anchor="3c79992e18-div-173-7">
        <h2 className="section-title">Business Overview</h2>
      </div>
      <div className="grid grid--5" style={{ gap: 14, marginBottom: 14 }}>
        <Metric accent label="Total Revenue" value={fmtEURFull(kpis.totalRevenue)} hint={kpis.totalBookings + " bookings"} />
        <Metric label="Total Bookings" value={kpis.totalBookings.toLocaleString()} />
        <Metric label="Avg Transaction Value" value={"€" + Math.round(kpis.avgValue).toLocaleString()} />
        <Metric label="Profit" value={fmtEURFull(kpis.profit)} hint="30% margin proxy" />
        <Metric label="Active Agencies" value={String(kpis.activeAgencies)} hint={agencies.length + " total"} />
      </div>

      {/* Cancellations (by users, across ALL service segments) */}
      <div className="row" style={{ marginBottom: 12 }}>
        <h2 className="section-title">Cancellations · all services</h2>
        <span className="muted tiny" style={{ marginLeft: 8 }}>Client-initiated, across Hotels, Car Rental, Transfer, Airport Lounge, VIP Airport & Private Tours</span>
      </div>
      <div className="grid grid--4" style={{ gap: 14, marginBottom: 14 }}>
        <Metric label="User cancellations" value={String(kpis.cancellations)} hint={kpis.cancelRate.toFixed(1) + "% of all bookings"} />
        <Metric label="Cancelled value" value={fmtEURFull(kpis.cancelledValue)} hint="Gross value cancelled" />
        <Metric label="Refundable cancels" value="—" hint="Backend feed pending" />
        <Metric label="Cancellation revenue lost" value={fmtEURFull(kpis.cancelledValue * 0.3)} hint="30% margin proxy" />
      </div>
      <Card title="Cancellations by service segment" style={{ marginBottom: 24 }} flush>
        <table className="tbl">
          <thead><tr><th>Service</th><th className="num">Cancellations</th><th className="num">Cancel rate</th><th className="num">Cancelled value</th><th className="num">Refundable</th><th className="num">MoM</th><th className="num">YoY</th></tr></thead>
          <tbody>
            {[
            { svc: "Hotels", kind: "hotel", cx: 486, rate: 3.9, val: 312, refund: 71, mom: "+3.1%", yoy: "−2.0%" },
            { svc: "Car Rental", kind: "rental", cx: 118, rate: 5.4, val: 84, refund: 64, mom: "+1.8%", yoy: "−3.2%" },
            { svc: "Transfer", kind: "transfer", cx: 74, rate: 6.0, val: 38, refund: 78, mom: "−0.4%", yoy: "−1.1%" },
            { svc: "Airport Lounge", kind: "vip", cx: 32, rate: 8.3, val: 24, refund: 58, mom: "+2.2%", yoy: "+0.6%" },
            { svc: "VIP Airport", kind: "vipas", cx: 20, rate: 10.0, val: 18, refund: 52, mom: "+1.1%", yoy: "−0.8%" },
            { svc: "Private Tours", kind: "ptour", cx: 12, rate: 11.1, val: 10, refund: 60, mom: "−1.0%", yoy: "−2.4%" }].
            map((r) =>
            <tr key={r.svc}>
                <td><Tag kind={r.kind}>{r.svc}</Tag></td>
                <td className="num mono bold">{r.cx}</td>
                <td className="num mono">{r.rate}%</td>
                <td className="num mono">€{r.val}k</td>
                <td className="num mono">{r.refund}%</td>
                <td className="num mono" style={{ color: r.mom.startsWith("−") ? "var(--success)" : "var(--danger)" }}>{r.mom}</td>
                <td className="num mono" style={{ color: r.yoy.startsWith("−") ? "var(--success)" : "var(--danger)" }}>{r.yoy}</td>
              </tr>
            )}
          </tbody>
        </table>
      </Card>

      {/* Revenue detail — multi-line comparison chart */}
      <Card title="Revenue detail" sub="2023 vs 2024 vs 2025" actions={<Segmented value="m" onChange={() => {}} options={[{ value: "d", label: "Daily" }, { value: "w", label: "Weekly" }, { value: "m", label: "Monthly" }, { value: "q", label: "Quarterly" }]} />} style={{ marginBottom: 18 }}>
        <AreaChart height={280} data={[
        { label: "Jan", y2023: 480, y2024: 620, y2025: 720 }, { label: "Feb", y2023: 520, y2024: 680, y2025: 740 },
        { label: "Mar", y2023: 580, y2024: 740, y2025: 810 }, { label: "Apr", y2023: 640, y2024: 810, y2025: 920 },
        { label: "May", y2023: 720, y2024: 920, y2025: 1040 }, { label: "Jun", y2023: 800, y2024: 1010, y2025: 1120 },
        { label: "Jul", y2023: 920, y2024: 1120, y2025: 1280 }, { label: "Aug", y2023: 980, y2024: 1180, y2025: 1340 },
        { label: "Sep", y2023: 860, y2024: 1060, y2025: 1200 }, { label: "Oct", y2023: 740, y2024: 920, y2025: 1040 },
        { label: "Nov", y2023: 680, y2024: 840, y2025: 960 }, { label: "Dec", y2023: 640, y2024: 780, y2025: 900 }]
        } valueFmt={fmtEUR} series={[
        { key: "y2023", name: "2023", color: "#94a3b8" }, { key: "y2024", name: "2024", color: "#635bff" }, { key: "y2025", name: "2025", color: "#00d4ff" }]
        } />
      </Card>

      {/* Financial information + System information */}
      <div className="grid grid--2" style={{ gap: 18, marginBottom: 24 }}>
        <div>
          <div className="row" style={{ marginBottom: 12 }}><h2 className="section-title">Financial information</h2></div>
          <div className="grid grid--2" style={{ gap: 12, marginBottom: 12 }}>
            <Card><div className="metric__label">Closed orders</div><div className="metric__value">12,428</div><div className="tiny muted">8,420 this year</div></Card>
            <Card><div className="metric__label">Current balance</div><div className="metric__value">€2.84M</div><div className="tiny muted" style={{ color: "var(--success)" }}>+18.2% YoY</div></Card>
          </div>
          <div className="grid grid--2" style={{ gap: 12 }}>
            <Card><div className="metric__label">YTD Profit</div><div className="metric__value">€840k</div><div className="tiny muted">Margin 29.6%</div></Card>
            <Card><div className="metric__label">Accumulated profit</div><div className="metric__value">€3.2M</div><div className="tiny muted">Since 2020</div></Card>
          </div>
        </div>
        <div>
          <div className="row" style={{ marginBottom: 12 }}><h2 className="section-title">System information</h2></div>
          <Card title="System health" style={{ marginBottom: 12 }}>
            <div className="grid grid--3" style={{ gap: 10, fontSize: 13 }}>
              <div><div className="tiny muted">API uptime</div><div className="bold">99.98%</div></div>
              <div><div className="tiny muted">Avg latency</div><div className="bold">124ms</div></div>
              <div><div className="tiny muted">Error rate</div><div className="bold" style={{ color: "var(--success)" }}>0.02%</div></div>
            </div>
          </Card>
          <Card title="Website traffic" sub="Last 30 days">
            <div className="grid grid--3" style={{ gap: 10, fontSize: 13 }}>
              <div><div className="tiny muted">Visitors</div><div className="bold">84,200</div></div>
              <div><div className="tiny muted">Page views</div><div className="bold">342k</div></div>
              <div><div className="tiny muted">Conversion</div><div className="bold" style={{ color: "var(--success)" }}>3.8%</div></div>
            </div>
          </Card>
        </div>
      </div>

      {/* L2B — Look-to-Book: searches vs conversion */}
      <div className="row" style={{ marginBottom: 12 }}>
        <h2 className="section-title">Look to Book (L2B)</h2>
        <span className="spacer" />
        <Segmented value="m" onChange={() => {}} options={[{ value: "w", label: "Week" }, { value: "m", label: "Month" }, { value: "q", label: "Quarter" }, { value: "y", label: "Year" }]} />
      </div>
      <div className="grid grid--4" style={{ gap: 14, marginBottom: 14 }}>
        <Metric accent label="Hotel searches" value="2.84M" delta="+18% MoM · +24% YoY" deltaDir="up" />
        <Metric label="Bookings" value="8,420" delta="+12% MoM · +14% YoY" deltaDir="up" />
        <Metric label="L2B ratio" value="338:1" delta="−4% MoM (better)" deltaDir="up" hint="Searches per booking" />
        <Metric label="Conversion" value="0.30%" delta="+0.02 pt MoM" deltaDir="up" hint="Search → booking" />
      </div>
      <Card title="Searches vs Conversion · 12 months" sub="L2B — search volume against conversion rate" style={{ marginBottom: 24 }}>
        <AreaChart height={260} data={[
        { label: "Jan", searches: 180, conversion: 0.26 }, { label: "Feb", searches: 198, conversion: 0.27 },
        { label: "Mar", searches: 224, conversion: 0.28 }, { label: "Apr", searches: 248, conversion: 0.29 },
        { label: "May", searches: 286, conversion: 0.30 }, { label: "Jun", searches: 312, conversion: 0.31 },
        { label: "Jul", searches: 342, conversion: 0.33 }, { label: "Aug", searches: 358, conversion: 0.34 },
        { label: "Sep", searches: 318, conversion: 0.32 }, { label: "Oct", searches: 286, conversion: 0.30 },
        { label: "Nov", searches: 248, conversion: 0.28 }, { label: "Dec", searches: 224, conversion: 0.27 }]
        } valueFmt={(v) => v >= 10 ? v + "k" : v + "%"} series={[
        { key: "searches", name: "Searches (k)", color: "#635bff" },
        { key: "conversion", name: "Conversion (%)", color: "#00d4ff" }]
        } />
      </Card>

      {/* API INTEGRATIONS — production bookings via API vs Web */}
      <div className="row" style={{ marginBottom: 12, marginTop: 8 }}>
        <h2 className="section-title">API Integrations</h2>
        <span className="spacer" />
        <Segmented value="m" onChange={() => {}} options={[{ value: "w", label: "Week" }, { value: "m", label: "Month" }, { value: "q", label: "Quarter" }, { value: "y", label: "Year" }]} />
      </div>
      <div className="grid grid--4" style={{ gap: 14, marginBottom: 14 }}>
        <Metric accent label="API bookings" value="7,842" delta="+22% MoM · +38% YoY" deltaDir="up" hint="63% of all bookings" />
        <Metric label="Web bookings" value="4,586" delta="+6% MoM · +9% YoY" deltaDir="up" hint="37% of all bookings" />
        <Metric label="API uptime" value="99.97%" delta="+0.02 pt" deltaDir="up" hint="12 connected agencies" />
        <Metric label="API revenue" value="€6.7M" delta="+24% YoY" deltaDir="up" hint="63% of revenue" />
      </div>
      <div className="grid" style={{ gridTemplateColumns: "1.6fr 1fr", gap: 18, marginBottom: 24 }}>
        <Card title="Production bookings · API vs Web" sub="Channel split over 12 months">
          <AreaChart height={240} data={[
          { label: "Jan", api: 420, web: 320 }, { label: "Feb", api: 468, web: 332 },
          { label: "Mar", api: 524, web: 348 }, { label: "Apr", api: 588, web: 372 },
          { label: "May", api: 642, web: 398 }, { label: "Jun", api: 712, web: 412 },
          { label: "Jul", api: 798, web: 442 }, { label: "Aug", api: 842, web: 458 },
          { label: "Sep", api: 742, web: 418 }, { label: "Oct", api: 648, web: 392 },
          { label: "Nov", api: 568, web: 364 }, { label: "Dec", api: 512, web: 348 }]
          } series={[
          { key: "api", name: "API", color: "#635bff" },
          { key: "web", name: "Web", color: "#00d4ff" }]
          } />
        </Card>
        <Card title="Channel mix" sub="Bookings by source">
          <DonutCard data={[
          { label: "API", value: 7842, color: "#635bff" },
          { label: "Web", value: 4586, color: "#00d4ff" }]
          } />
          <div className="divider" />
          <table className="tbl" style={{ fontSize: 12.5 }}>
            <thead><tr><th>Top API agency</th><th className="num">Bookings</th></tr></thead>
            <tbody>
              <tr><td>OptiTron Tech</td><td className="num mono">2,184</td></tr>
              <tr><td>Industrial Dynamics</td><td className="num mono">1,642</td></tr>
              <tr><td>Northwind Travel</td><td className="num mono">1,208</td></tr>
            </tbody>
          </table>
        </Card>
      </div>

      {/* ACCOMMODATION (Hotels) */}
      <ServiceSection
        id="accommodation"
        title="Accommodation"
        icon="hotel"
        bookings={8420}
        revenue={2840000}
        avgValue={337}
        delta="+14.2%"
        extraMetrics={<Metric label="Total nights" value="38,420" hint="Avg 4.6 nights/booking" />}
        chartData={[
        { label: "Jan", bookings: 580, revenue: 148 }, { label: "Feb", bookings: 640, revenue: 162 },
        { label: "Mar", bookings: 720, revenue: 184 }, { label: "Apr", bookings: 820, revenue: 208 },
        { label: "May", bookings: 940, revenue: 238 }, { label: "Jun", bookings: 1040, revenue: 262 },
        { label: "Jul", bookings: 1160, revenue: 294 }, { label: "Aug", bookings: 1220, revenue: 312 },
        { label: "Sep", bookings: 1090, revenue: 278 }, { label: "Oct", bookings: 950, revenue: 242 },
        { label: "Nov", bookings: 860, revenue: 218 }, { label: "Dec", bookings: 810, revenue: 206 }]
        }
        topVendors={[
        { name: "Marriott International", bookings: 1240, revenue: 420000, share: 14.8 },
        { name: "Hilton Worldwide", bookings: 980, revenue: 340000, share: 12.0 },
        { name: "AC Hotels Group", bookings: 860, revenue: 280000, share: 9.9 },
        { name: "Olympia Tours", bookings: 520, revenue: 180000, share: 6.3 },
        { name: "Costa Cruises", bookings: 480, revenue: 160000, share: 5.6 }]
        }
        channelMix={[
        { label: "API · Web", value: 5420, color: "#635bff" },
        { label: "API · Portal", value: 2100, color: "#00d4ff" },
        { label: "Phone / Email", value: 680, color: "#a78bfa" },
        { label: "Partner import", value: 220, color: "#ff9f43" }]
        }
        topDestinations={[
        { name: "Barcelona", bookings: 1420, revenue: 480000 },
        { name: "Madrid", bookings: 1240, revenue: 420000 },
        { name: "Seville", bookings: 840, revenue: 280000 },
        { name: "Valencia", bookings: 680, revenue: 220000 },
        { name: "Málaga", bookings: 520, revenue: 180000 }]
        }
        extraMetrics={[
        { label: "Total nights", value: "24,840", hint: "Avg 2.9 nights/booking" },
        { label: "Booking window", value: "42 days", hint: "Avg lead time" },
        { label: "Top category", value: "4★", hint: "48% of bookings" },
        { label: "Top board", value: "B&B", hint: "62% of bookings" }]
        }
        topAgencies={[
        { name: "Optitron Travel Solutions", bookings: 1240, revenue: 420000, growth: 24.2 },
        { name: "SunTours España", bookings: 980, revenue: 340000, growth: 18.4 },
        { name: "Global Ventures Ltd", bookings: 840, revenue: 280000, growth: 31.2 },
        { name: "Nordic Travel Group", bookings: 680, revenue: 220000, growth: 14.8 },
        { name: "MedTravel Partners", bookings: 520, revenue: 180000, growth: 22.1 }]
        } />
      

      {/* CAR RENTAL */}
      <ServiceSection
        id="car-rental"
        title="Car Rental"
        icon="rental"
        bookings={2184}
        revenue={680000}
        avgValue={311}
        delta="+18.4%"
        chartData={[
        { label: "Jan", bookings: 140, revenue: 32 }, { label: "Feb", bookings: 162, revenue: 38 },
        { label: "Mar", bookings: 178, revenue: 42 }, { label: "Apr", bookings: 198, revenue: 48 },
        { label: "May", bookings: 220, revenue: 54 }, { label: "Jun", bookings: 248, revenue: 61 },
        { label: "Jul", bookings: 280, revenue: 68 }, { label: "Aug", bookings: 296, revenue: 72 },
        { label: "Sep", bookings: 262, revenue: 64 }, { label: "Oct", bookings: 228, revenue: 56 },
        { label: "Nov", bookings: 210, revenue: 51 }, { label: "Dec", bookings: 198, revenue: 48 }]
        }
        topVendors={[
        { name: "Sixt Rent a Car", bookings: 680, revenue: 210000, share: 30.9 },
        { name: "Europcar Mobility", bookings: 540, revenue: 168000, share: 24.7 },
        { name: "Hertz", bookings: 420, revenue: 128000, share: 18.8 },
        { name: "Enterprise Rent-A-Car", bookings: 320, revenue: 98000, share: 14.4 },
        { name: "Budget", bookings: 224, revenue: 76000, share: 11.2 }]
        }
        channelMix={[
        { label: "API · Web", value: 1420, color: "#0e7c66" },
        { label: "API · Portal", value: 580, color: "#00d4ff" },
        { label: "Phone", value: 184, color: "#a78bfa" }]
        }
        topDestinations={[
        { name: "Málaga Airport", bookings: 420, revenue: 130000 },
        { name: "Barcelona Airport", bookings: 380, revenue: 118000 },
        { name: "Madrid Airport", bookings: 340, revenue: 106000 },
        { name: "Palma de Mallorca", bookings: 280, revenue: 87000 },
        { name: "Alicante Airport", bookings: 220, revenue: 68000 }]
        }
        extraMetrics={[
        { label: "Rental days", value: "8,420", hint: "Avg 3.9 days/booking" },
        { label: "Booking window", value: "28 days", hint: "Avg lead time" },
        { label: "Top category", value: "Economy", hint: "42% of bookings" }]
        }
        topAgencies={[
        { name: "SunTours España", bookings: 420, revenue: 130000, growth: 28.4 },
        { name: "Nordic Travel Group", bookings: 340, revenue: 106000, growth: 22.1 },
        { name: "Optitron Travel Solutions", bookings: 280, revenue: 87000, growth: 18.2 },
        { name: "MedTravel Partners", bookings: 220, revenue: 68000, growth: 31.4 },
        { name: "Global Ventures Ltd", bookings: 180, revenue: 56000, growth: 14.8 }]
        } />
      

      {/* TRANSFER */}
      <ServiceSection
        id="transfer"
        title="Transfer"
        icon="transfer"
        bookings={1240}
        revenue={520000}
        avgValue={419}
        delta="+22.1%"
        chartData={[
        { label: "Jan", bookings: 80, revenue: 24 }, { label: "Feb", bookings: 92, revenue: 28 },
        { label: "Mar", bookings: 102, revenue: 31 }, { label: "Apr", bookings: 118, revenue: 36 },
        { label: "May", bookings: 136, revenue: 42 }, { label: "Jun", bookings: 156, revenue: 48 },
        { label: "Jul", bookings: 176, revenue: 54 }, { label: "Aug", bookings: 188, revenue: 58 },
        { label: "Sep", bookings: 168, revenue: 52 }, { label: "Oct", bookings: 148, revenue: 46 },
        { label: "Nov", bookings: 136, revenue: 42 }, { label: "Dec", bookings: 126, revenue: 39 }]
        }
        topVendors={[
        { name: "Cabify Business", bookings: 420, revenue: 178000, share: 34.2 },
        { name: "Blacklane", bookings: 340, revenue: 142000, share: 27.3 },
        { name: "HolidayTaxis", bookings: 260, revenue: 108000, share: 20.8 },
        { name: "Welcome Pickups", bookings: 140, revenue: 58000, share: 11.2 },
        { name: "GetTransfer", bookings: 80, revenue: 34000, share: 6.5 }]
        }
        channelMix={[
        { label: "API · Web", value: 820, color: "#00d4ff" },
        { label: "API · Portal", value: 280, color: "#635bff" },
        { label: "Phone", value: 140, color: "#a78bfa" }]
        }
        topDestinations={[
        { name: "Barcelona Airport → City", bookings: 240, revenue: 101000 },
        { name: "Madrid Airport → City", bookings: 220, revenue: 92000 },
        { name: "Málaga Airport → Marbella", bookings: 180, revenue: 76000 },
        { name: "Palma Airport → Hotels", bookings: 140, revenue: 59000 },
        { name: "Alicante Airport → City", bookings: 120, revenue: 50000 }]
        }
        extraMetrics={[
        { label: "Booking window", value: "18 days", hint: "Avg lead time" },
        { label: "Top vehicle", value: "Standard sedan", hint: "54% of bookings" }]
        }
        topAgencies={[
        { name: "Optitron Travel Solutions", bookings: 240, revenue: 101000, growth: 32.4 },
        { name: "Nordic Travel Group", bookings: 220, revenue: 92000, growth: 24.8 },
        { name: "SunTours España", bookings: 180, revenue: 76000, growth: 18.2 },
        { name: "Global Ventures Ltd", bookings: 140, revenue: 59000, growth: 28.1 },
        { name: "MedTravel Partners", bookings: 120, revenue: 50000, growth: 22.4 }]
        } />
      

      {/* VIP LOUNGE */}
      <ServiceSection
        id="vip-lounge"
        title="Airport Lounge"
        icon="vip"
        bookings={384}
        revenue={180000}
        avgValue={469}
        delta="+16.8%"
        chartData={[
        { label: "Jan", bookings: 24, revenue: 11 }, { label: "Feb", bookings: 28, revenue: 13 },
        { label: "Mar", bookings: 32, revenue: 15 }, { label: "Apr", bookings: 36, revenue: 17 },
        { label: "May", bookings: 42, revenue: 20 }, { label: "Jun", bookings: 48, revenue: 23 },
        { label: "Jul", bookings: 54, revenue: 26 }, { label: "Aug", bookings: 58, revenue: 28 },
        { label: "Sep", bookings: 52, revenue: 25 }, { label: "Oct", bookings: 46, revenue: 22 },
        { label: "Nov", bookings: 42, revenue: 20 }, { label: "Dec", bookings: 38, revenue: 18 }]
        }
        topVendors={[
        { name: "Plaza Premium Lounge", bookings: 142, revenue: 68000, share: 37.8 },
        { name: "Priority Pass Network", bookings: 118, revenue: 54000, share: 30.0 },
        { name: "LoungeKey", bookings: 84, revenue: 38000, share: 21.1 },
        { name: "SAS Lounge", bookings: 40, revenue: 20000, share: 11.1 }]
        }
        channelMix={[
        { label: "API · Web", value: 260, color: "#a78bfa" },
        { label: "API · Portal", value: 92, color: "#00d4ff" },
        { label: "Phone", value: 32, color: "#635bff" }]
        }
        topDestinations={[
        { name: "Madrid Airport", bookings: 84, revenue: 40000 },
        { name: "Barcelona Airport", bookings: 72, revenue: 34000 },
        { name: "Palma Airport", bookings: 58, revenue: 27000 },
        { name: "Málaga Airport", bookings: 42, revenue: 20000 },
        { name: "Alicante Airport", bookings: 32, revenue: 15000 }]
        }
        topAgencies={[
        { name: "Nordic Travel Group", bookings: 84, revenue: 40000, growth: 24.2 },
        { name: "Global Ventures Ltd", bookings: 72, revenue: 34000, growth: 18.8 },
        { name: "Optitron Travel Solutions", bookings: 58, revenue: 27000, growth: 31.4 },
        { name: "MedTravel Partners", bookings: 42, revenue: 20000, growth: 22.1 },
        { name: "SunTours España", bookings: 32, revenue: 15000, growth: 16.2 }]
        } />
      

      {/* VIP AIRPORT SERVICES */}
      <div className="row" style={{ marginTop: 32, marginBottom: 12 }} data-comment-anchor="6f36bc8080-div-361-7">
        <h2 className="section-title">VIP Airport Services</h2>
      </div>
      <div className="grid grid--4" style={{ gap: 12, marginBottom: 14 }}>
        <Metric accent label="Bookings" value="200" delta="+24.2%" deltaDir="up" />
        <Metric label="Revenue (YTD)" value="€140k" hint="All channels" />
        <Metric label="Avg booking value" value="€700" hint="Per transaction" />
        <Metric label="Top service" value="Meet & Greet" hint="€48k revenue" />
      </div>
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 18, marginBottom: 24 }}>
        <Card title="Bookings · 12 months">
          <BarChart
            height={200}
            data={[
            { label: "Jan", b: 12 }, { label: "Feb", b: 14 }, { label: "Mar", b: 16 },
            { label: "Apr", b: 18 }, { label: "May", b: 22 }, { label: "Jun", b: 26 },
            { label: "Jul", b: 30 }, { label: "Aug", b: 32 }, { label: "Sep", b: 28 },
            { label: "Oct", b: 24 }, { label: "Nov", b: 20 }, { label: "Dec", b: 18 }]
            }
            series={[{ key: "b", name: "Bookings", color: "#ff9f43" }]} />
          
        </Card>
        <Card title="Revenue · 12 months">
          <AreaChart
            height={200}
            data={[
            { label: "Jan", revenue: 8 }, { label: "Feb", revenue: 10 }, { label: "Mar", revenue: 11 },
            { label: "Apr", revenue: 13 }, { label: "May", revenue: 15 }, { label: "Jun", revenue: 18 },
            { label: "Jul", revenue: 21 }, { label: "Aug", revenue: 22 }, { label: "Sep", revenue: 20 },
            { label: "Oct", revenue: 17 }, { label: "Nov", revenue: 14 }, { label: "Dec", revenue: 13 }]
            }
            valueFmt={(v) => "€" + v + "k"}
            series={[{ key: "revenue", name: "Revenue (€k)", color: "#ff9f43" }]} />
          
        </Card>
        <Card title="Service mix" flush>
          <div style={{ padding: "0 18px 18px" }}>
            <DonutCard data={[
            { label: "Meet & Greet", value: 64, color: "#ff9f43" },
            { label: "Fast Track", value: 82, color: "#635bff" },
            { label: "CIP Services", value: 38, color: "#00d4ff" },
            { label: "Porter", value: 16, color: "#a78bfa" }]
            } />
          </div>
        </Card>
      </div>
      <Card title="Top services · VIP airport" flush>
        <table className="tbl">
          <thead><tr><th>Service</th><th className="num">Bookings</th><th className="num">Revenue</th><th className="num">Share</th></tr></thead>
          <tbody>
            <tr><td className="bold">Meet & Greet</td><td className="num mono">64</td><td className="num mono">€48k</td><td className="num mono">34.3%</td></tr>
            <tr><td className="bold">Fast Track</td><td className="num mono">82</td><td className="num mono">€42k</td><td className="num mono">30.0%</td></tr>
          </tbody>
        </table>
      </Card>

      {/* TRAVEL AGENCY INSIGHTS — aggregate table */}
      <div className="row" style={{ marginBottom: 12 }} data-comment-anchor="1a7d1169a8-div-307-7">
        <h2 className="section-title">Travel Agency Insights</h2>
      </div>

      {/* Bookings by payment type + on-time payment */}
      <div className="grid grid--5" style={{ gap: 14, marginBottom: 14 }}>
        <Metric accent label="Prepaid accounts" value="1,842 bk" mom="+6% MoM" momDir="up" yoy="+12% YoY" yoyDir="up" hint="€642k · wallet/per-booking" />
        <Metric label="Credit accounts" value="2,418 bk" mom="+9% MoM" momDir="up" yoy="+18% YoY" yoyDir="up" hint="€1.28M · Net 7/14" />
        <Metric label="Full Credit accounts" value="1,104 bk" mom="+4% MoM" momDir="up" yoy="+8% YoY" yoyDir="up" hint="€918k · no deposit" />
        <Metric label="Deposits received" value="€185,000" mom="+€15k MoM" momDir="up" yoy="+€48k YoY" yoyDir="up" hint="From credit-with-deposit agencies · we double it" />
        <Metric label="On-time payment" value="92.4%" mom="+1.2 pt" momDir="up" yoy="+3.1 pt" yoyDir="up" hint="7.6% late / overdue cycles" />
      </div>
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Bookings by payment type" sub="Prepaid vs Credit vs Full Credit">
          <DonutCard data={[
            { label: "Credit", value: 2418, color: "#635bff" },
            { label: "Prepaid", value: 1842, color: "#00d4ff" },
            { label: "Full Credit", value: 1104, color: "#a78bfa" },
          ]} />
        </Card>
        <Card title="On-time vs late payment" sub="By payment type" flush>
          <table className="tbl">
            <thead><tr><th>Payment type</th><th className="num">Accounts</th><th className="num">On-time</th><th className="num">Late</th><th className="num">Overdue €</th></tr></thead>
            <tbody>
              <tr><td><Badge tone="neutral">Prepaid</Badge></td><td className="num mono">58</td><td className="num mono" style={{ color: "var(--success)" }}>98%</td><td className="num mono">2%</td><td className="num mono">€0</td></tr>
              <tr><td><Badge tone="warning">Credit</Badge></td><td className="num mono">62</td><td className="num mono" style={{ color: "var(--success)" }}>90%</td><td className="num mono" style={{ color: "var(--danger)" }}>10%</td><td className="num mono">€42k</td></tr>
              <tr><td><Badge tone="indigo">Full Credit</Badge></td><td className="num mono">22</td><td className="num mono" style={{ color: "var(--success)" }}>86%</td><td className="num mono" style={{ color: "var(--danger)" }}>14%</td><td className="num mono">€68k</td></tr>
            </tbody>
          </table>
        </Card>
      </div>

      <Card title="Top agencies by revenue · all services" flush>
        <table className="tbl">
          <thead>
            <tr>
              <th>Agency</th><th>Market</th><th className="num">Hotels</th><th className="num">Car Rental</th>
              <th className="num">Transfer</th><th className="num">VIP</th><th className="num">Total Rev</th><th className="num">Profit</th><th className="num">Share</th>
            </tr>
          </thead>
          <tbody>
            {window.MOCK.TRAVEL_AGENCIES.slice(0, 8).map((a, i) => {
              const hotel = Math.round(a.sales * 0.62);
              const car = Math.round(a.sales * 0.18);
              const transfer = Math.round(a.sales * 0.14);
              const vip = Math.round(a.sales * 0.06);
              const total = hotel + car + transfer + vip;
              const profit = Math.round(total * 0.135);
              return (
                <tr key={a.id}>
                  <td className="bold">{a.name}</td>
                  <td className="muted">{a.country}</td>
                  <td className="num mono">€{hotel.toLocaleString()}</td>
                  <td className="num mono">€{car.toLocaleString()}</td>
                  <td className="num mono">€{transfer.toLocaleString()}</td>
                  <td className="num mono">€{vip.toLocaleString()}</td>
                  <td className="num mono bold">€{total.toLocaleString()}</td>
                  <td className="num mono" style={{ color: "var(--success)" }}>€{profit.toLocaleString()}</td>
                  <td className="num mono">{(total / 2_840_000 * 100).toFixed(1)}%</td>
                </tr>);

            })}
          </tbody>
        </table>
      </Card>
    </div>);

}

// -----------------------------------------------------------
// Service section component (reusable for Accommodation/Car/Transfer)
// -----------------------------------------------------------
function ServiceSection({ id, title, icon, bookings, revenue, avgValue, delta, chartData, topVendors, channelMix, topDestinations, extraMetrics, topAgencies }) {
  const fmtEUR = (v) => "€" + (v >= 1000 ? (v / 1000).toFixed(v >= 10000 ? 0 : 1) + "k" : v);

  return (
    <>
      <div className="row" style={{ marginTop: 32, marginBottom: 12 }}>
        <h2 className="section-title">{title}</h2>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 12, marginBottom: 14 }}>
        <Metric accent label="Bookings" value={bookings.toLocaleString()} mom="+8.2%" momDir="up" yoy="+14.2%" yoyDir="up" />
        <Metric label="Revenue (YTD)" value={fmtEUR(revenue)} mom="+6.4%" momDir="up" yoy="+18.6%" yoyDir="up" />
        <Metric label="Avg booking value" value={"€" + avgValue} mom="+1.8%" momDir="up" yoy="+3.9%" yoyDir="up" />
        <Metric label="Profit" value={fmtEUR(revenue * 0.3)} mom="+7.1%" momDir="up" yoy="+21.4%" yoyDir="up" hint="30% margin" />
        <Metric label="Conversion" value="3.8%" mom="+0.2 pt" momDir="up" yoy="+0.4 pt" yoyDir="up" />
        {extraMetrics && extraMetrics.map((m, i) => <Metric key={i} label={m.label} value={m.value} mom={m.mom} momDir={m.momDir || "up"} yoy={m.yoy} yoyDir={m.yoyDir || "up"} hint={m.hint} />)}
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Bookings · 12 months">
          <BarChart
            height={200}
            data={chartData}
            series={[{ key: "bookings", name: "Bookings", color: icon === "hotel" ? "#635bff" : icon === "rental" ? "#0e7c66" : "#00d4ff" }]} />
        </Card>

        <Card title="Revenue · 12 months">
          <AreaChart
            height={200}
            data={chartData}
            valueFmt={fmtEUR}
            series={[{ key: "revenue", name: "Revenue (€k)", color: icon === "hotel" ? "#635bff" : icon === "rental" ? "#0e7c66" : "#00d4ff" }]} />
        </Card>

        <Card title="Booking channel" flush>
          <div style={{ padding: "0 18px 18px" }}>
            <DonutCard data={channelMix} />
          </div>
        </Card>
      </div>

      <div className="grid grid--2" style={{ gap: 18, marginBottom: 18 }}>
        <Card title={`Top vendors · ${title.toLowerCase()}`} flush>
          <table className="tbl">
            <thead><tr><th>Vendor</th><th className="num">Bookings</th>{icon === "hotel" && <th className="num">NRN</th>}<th className="num">Revenue</th><th className="num">Profit</th><th className="num">Share</th></tr></thead>
            <tbody>
              {topVendors.map((v) =>
              <tr key={v.name}>
                  <td className="bold">{v.name}</td>
                  <td className="num mono">{v.bookings.toLocaleString()}</td>
                  {icon === "hotel" && <td className="num mono">{(v.bookings * 4.6).toFixed(0).toLocaleString()}</td>}
                  <td className="num mono">€{v.revenue.toLocaleString()}</td>
                  <td className="num mono" style={{ color: "var(--success)" }}>€{Math.round(v.revenue * 0.3).toLocaleString()}</td>
                  <td className="num mono">{v.share.toFixed(1)}%</td>
                </tr>
              )}
            </tbody>
          </table>
        </Card>
        {topDestinations && <Card title={`Top destinations · ${title.toLowerCase()}`} flush>
          <table className="tbl">
            <thead><tr><th>Destination</th><th className="num">Bookings</th>{icon === "hotel" && <th className="num">NRN</th>}<th className="num">Revenue</th><th className="num">Profit</th></tr></thead>
            <tbody>
              {topDestinations.map((d) =>
              <tr key={d.name}>
                  <td className="bold">{d.name}</td>
                  <td className="num mono">{d.bookings.toLocaleString()}</td>
                  {icon === "hotel" && <td className="num mono">{(d.bookings * 4.6).toFixed(0).toLocaleString()}</td>}
                  <td className="num mono">€{d.revenue.toLocaleString()}</td>
                  <td className="num mono" style={{ color: "var(--success)" }}>€{Math.round(d.revenue * 0.3).toLocaleString()}</td>
                </tr>
              )}
            </tbody>
          </table>
        </Card>}
      </div>

      {topAgencies && <Card title={`Top agencies · ${title.toLowerCase()}`} flush style={{ marginBottom: 24 }}>
        <table className="tbl">
          <thead><tr><th>Agency</th><th className="num">Bookings</th>{icon === "hotel" && <th className="num">NRN</th>}<th className="num">Revenue</th><th className="num">Profit</th><th className="num">Share</th><th className="num">Growth YoY</th></tr></thead>
          <tbody>
            {topAgencies.map((a) => {
              const totalRev = topAgencies.reduce((s, x) => s + x.revenue, 0);
              return (
                <tr key={a.name}>
                <td className="bold">{a.name}</td>
                <td className="num mono">{a.bookings.toLocaleString()}</td>
                {icon === "hotel" && <td className="num mono">{(a.bookings * 4.6).toFixed(0).toLocaleString()}</td>}
                <td className="num mono">€{a.revenue.toLocaleString()}</td>
                <td className="num mono" style={{ color: "var(--success)" }}>€{Math.round(a.revenue * 0.3).toLocaleString()}</td>
                <td className="num mono">{(a.revenue / totalRev * 100).toFixed(1)}%</td>
                <td className="num mono" style={{ color: "var(--success)" }}>+{a.growth}%</td>
              </tr>);
            })}
          </tbody>
        </table>
      </Card>}
    </>);

}

Object.assign(window, { PageDashboardNew });