// SONARA — Producer Ordini (3 tabs: Ordini · Offerte inviate · Vendite catalog)
const OIcons = window.SonaraIcons;

/* ─────── ICONS ─────── */
const ChevIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;
const StarIc = ({ size = 12, filled = true }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
const DotsIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>;
const SearchIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>;
const ChevDownIc = ({ size = 11 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>;
const ClockIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
const DownloadIc = ({ size = 13 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>;
const CheckIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;
const XIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;

/* Status map for ordini */
const ORD_STATUS = {
  briefing: { label: "Briefing", cls: "info" },
  in_progress: { label: "In lavorazione", cls: "active" },
  in_review: { label: "In revisione", cls: "review" },
  revisions_requested: { label: "Revisione richiesta", cls: "warn" },
  waiting_files: { label: "Attesa stems", cls: "warn" },
  completed: { label: "Completato", cls: "ok" },
  disputed: { label: "In disputa", cls: "danger" },
  cancelled: { label: "Annullato", cls: "neutral" },
};

const ORDERS = [
  { id: "ORD-4821", kind: "Mix + Master", title: "EP \"Asfalto\" (5 brani)", who: "RAZZA", whoIn: "RZ", verified: true, status: "revisions_requested", net: 158, gross: 180, deadline: -2, activity: "Hai consegnato v1 · revisione richiesta su \"Vento\"", urgent: true, openType: "open" },
  { id: "ORD-4815", kind: "Beat esclusivo", title: "Notturno · uso esclusivo", who: "Yoshi K.", whoIn: "YK", verified: true, status: "briefing", net: 308, gross: 350, deadline: 22, activity: "Artista ha caricato i riferimenti · 1h fa", urgent: true, openType: "open" },
  { id: "ORD-4808", kind: "Mix stereo", title: "Singolo \"Mezzanotte\"", who: "M. Lentini", whoIn: "ML", verified: false, status: "in_progress", net: 105, gross: 120, deadline: 48, activity: "Stems completi · countdown attivo", urgent: false, openType: "open" },
  { id: "ORD-4801", kind: "Vocal production", title: "Brano \"Senza Te\"", who: "Sara D.", whoIn: "SD", verified: false, status: "waiting_files", net: 79, gross: 90, deadline: 96, activity: "Attesa stems · countdown in pausa", urgent: false, openType: "open" },

  { id: "ORD-4799", kind: "Mix + Master", title: "Singolo \"Bagliore\"", who: "Giulia P.", whoIn: "GP", verified: false, status: "completed", net: 158, gross: 180, deadline: 0, activity: "Chiuso · ★ 5.0", urgent: false, openType: "closed", closedAt: "12 maggio 2026" },
  { id: "ORD-4792", kind: "Custom production", title: "Beat su brief \"Tramonto\"", who: "Federico V.", whoIn: "FV", verified: true, status: "completed", net: 308, gross: 350, deadline: 0, activity: "Chiuso · ★ 4.8", urgent: false, openType: "closed", closedAt: "8 maggio 2026" },
  { id: "ORD-4780", kind: "Mix stereo", title: "Singolo \"Pioggia\"", who: "Marco T.", whoIn: "MT", verified: false, status: "completed", net: 105, gross: 120, deadline: 0, activity: "Chiuso · ★ 5.0", urgent: false, openType: "closed", closedAt: "3 maggio 2026" },
  { id: "ORD-4762", kind: "Beat esclusivo", title: "Lupo · uso esclusivo", who: "Ricky F.", whoIn: "RF", verified: true, status: "cancelled", net: 0, gross: 300, deadline: 0, activity: "Annullato dal cliente entro 24h", urgent: false, openType: "closed", closedAt: "1 maggio 2026" },
];

/* ─────── OFFERS ─────── */
const OFF_STATUS = {
  sent: { label: "Inviata", cls: "info" },
  counter: { label: "Counter ricevuto", cls: "warn" },
  accepted: { label: "Accettata", cls: "ok" },
  rejected: { label: "Rifiutata", cls: "neutral" },
  expired: { label: "Scaduta", cls: "neutral" },
  withdrawn: { label: "Ritirata", cls: "neutral" },
};

const OFFERS = [
  { id: "OFF-2014", req: "Cerco beat trap 808 pesante", reqOwner: "AlessioRap", reqInit: "AR", type: "Beat custom", myPrice: 180, deadline: "10 gg", status: "counter", time: "1h fa", message: "Lavoro su sound dark con 808 spaziali. Ti mando 2 ref qui sotto.", counter: { price: 140, note: "Per noi 140 va bene se possiamo aggiungere 1 revisione" } },
  { id: "OFF-2010", req: "Mix EP 5 tracce drill", reqOwner: "Quartiere9", reqInit: "Q9", type: "Mix + Master", myPrice: 820, deadline: "21 gg", status: "sent", time: "5h fa", message: "Specializzato in drill, ho lavorato a EP simili. Pacchetto include 2 revisioni + master radio-ready." },
  { id: "OFF-2007", req: "Custom production R&B Daniel Caesar vibe", reqOwner: "Lina Sky", reqInit: "LS", type: "Custom production", myPrice: 380, deadline: "7 gg", status: "accepted", time: "Ieri", message: "Posso fare beat + mix base inclusi.", convertedTo: "ORD-4821" },
  { id: "OFF-1998", req: "Beat hip-hop boom bap", reqOwner: "Rino82", reqInit: "R8", type: "Beat custom", myPrice: 220, deadline: "5 gg", status: "rejected", time: "2gg fa", message: "Ho campioni vinilici puliti che fanno al caso tuo." },
  { id: "OFF-1985", req: "Master per singolo trap", reqOwner: "DamoBeats", reqInit: "DB", type: "Mastering", myPrice: 80, deadline: "2 gg", status: "expired", time: "1 sett. fa", message: "Master loud + radio-ready in 48h." },
];

/* ─────── CATALOG SALES ─────── */
const SALES = [
  { id: "S-3201", beat: "Lupo Solitario", grad: "b3", artist: "RAZZA", artistInit: "RZ", date: "Oggi", license: "Non-esclusiva", price: 45, net: 39.6 },
  { id: "S-3198", beat: "Lupo Solitario", grad: "b3", artist: "Yoshi K.", artistInit: "YK", date: "Ieri", license: "Non-esclusiva", price: 45, net: 39.6 },
  { id: "S-3192", beat: "Notturno", grad: "b1", artist: "Marco T.", artistInit: "MT", date: "3gg fa", license: "Non-esclusiva", price: 45, net: 39.6 },
  { id: "S-3187", beat: "Cassetta Vuota", grad: "b6", artist: "Lina Sky", artistInit: "LS", date: "5gg fa", license: "Non-esclusiva", price: 45, net: 39.6 },
  { id: "S-3180", beat: "Mezzanotte", grad: "b1", artist: "RAZZA", artistInit: "RZ", date: "1 sett. fa", license: "Esclusiva", price: 420, net: 369.6 },
  { id: "S-3175", beat: "Asfalto Bagnato", grad: "b2", artist: "Federico V.", artistInit: "FV", date: "2 sett. fa", license: "Non-esclusiva", price: 50, net: 44 },
  { id: "S-3168", beat: "Lupo Solitario", grad: "b3", artist: "Damo", artistInit: "DM", date: "2 sett. fa", license: "Non-esclusiva", price: 40, net: 35.2 },
  { id: "S-3162", beat: "Doppia Faccia", grad: "b4", artist: "AlessioRap", artistInit: "AR", date: "3 sett. fa", license: "Non-esclusiva", price: 45, net: 39.6 },
];

/* ─────── ORD CARD ─────── */
function OrdCard({ o }) {
  const fmtDeadline = (h) => {
    if (h < 0) return `In ritardo ${Math.abs(h)}h`;
    if (h === 0) return null;
    if (h < 24) return `Tra ${h}h`;
    return `Tra ${Math.round(h/24)}gg`;
  };
  const deadlineTxt = fmtDeadline(o.deadline);

  return (
    <a href="Ordine.html" className={`ord-card ${o.urgent ? "urgent" : ""}`}>
      <div className="ord-left">
        <div className="ord-art">
          <OIcons.audioFile size={18}/>
        </div>
      </div>
      <div className="ord-body">
        <div className="ord-row1">
          <span className="ord-kind">{o.kind}</span>
          <span className={`ord-status ${ORD_STATUS[o.status].cls}`}>{ORD_STATUS[o.status].label}</span>
          <span className="ord-id">{o.id}</span>
          {deadlineTxt && (
            <span className={`ord-deadline ${o.urgent ? "urgent" : ""}`}>
              {o.urgent && <span className="pulse"/>}
              <ClockIc size={11}/> {deadlineTxt}
            </span>
          )}
          {o.closedAt && <span className="ord-deadline closed">Chiuso {o.closedAt}</span>}
        </div>
        <div className="ord-row2">
          <div className="ord-title">{o.title}</div>
          <div className="ord-meta">
            <span className="ord-av">{o.whoIn}</span>
            <span className="ord-who">{o.who}</span>
            <span className="sep">·</span>
            <span>€{o.net} netto</span>
            <span className="sep">·</span>
            <span className="ord-activity">{o.activity}</span>
          </div>
        </div>
      </div>
      <div className="ord-actions">
        {o.openType === "open" ? (
          <>
            <button className="ord-btn ghost" onClick={(e) => e.preventDefault()}><DotsIc size={14}/></button>
            <button className={`ord-btn ${o.urgent ? "urgent" : "primary"}`} onClick={(e) => e.preventDefault()}>
              {o.status === "revisions_requested" ? "Carica v2" : o.status === "briefing" ? "Apri brief" : o.status === "waiting_files" ? "Sollecita" : "Apri"}
            </button>
          </>
        ) : (
          <>
            <button className="ord-btn ghost" onClick={(e) => e.preventDefault()}><DotsIc size={14}/></button>
            <button className="ord-btn primary" onClick={(e) => e.preventDefault()}>Apri</button>
          </>
        )}
      </div>
    </a>
  );
}

/* ─────── ORDERS TAB ─────── */
function OrdersTab() {
  const [openClosed, setOpenClosed] = React.useState("open");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [sort, setSort] = React.useState("deadline");

  let items = ORDERS.filter(o => o.openType === openClosed);
  if (statusFilter !== "all") items = items.filter(o => o.status === statusFilter);
  // sort: deadline = urgenza
  items = [...items].sort((a, b) => {
    if (sort === "deadline") return a.deadline - b.deadline;
    if (sort === "amount") return b.net - a.net;
    return 0;
  });

  const inProgressCount = ORDERS.filter(o => o.openType === "open").length;

  return (
    <>
      <div className="ord-toolbar">
        <div className="ord-toggle">
          <button className={openClosed === "open" ? "active" : ""} onClick={() => setOpenClosed("open")}>
            In corso <span className="c">{ORDERS.filter(o => o.openType === "open").length}</span>
          </button>
          <button className={openClosed === "closed" ? "active" : ""} onClick={() => setOpenClosed("closed")}>
            Chiusi <span className="c">{ORDERS.filter(o => o.openType === "closed").length}</span>
          </button>
        </div>
        <div className="ord-search">
          <SearchIc size={14}/>
          <input placeholder="Cerca per cliente o titolo…"/>
        </div>
        <div className="ord-toolbar-right">
          <div className="cat-sort">
            <span>Ordina</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="deadline">Scadenza</option>
              <option value="amount">Importo</option>
            </select>
            <ChevDownIc size={11}/>
          </div>
        </div>
      </div>

      <div className="ord-chips">
        {[
          { v: "all", l: "Tutti" },
          { v: "briefing", l: "Briefing" },
          { v: "in_progress", l: "In lavorazione" },
          { v: "in_review", l: "In revisione" },
          { v: "revisions_requested", l: "Revisione richiesta" },
          { v: "waiting_files", l: "Attesa stems" },
          ...(openClosed === "closed" ? [{ v: "completed", l: "Completati" }, { v: "cancelled", l: "Annullati" }] : []),
        ].map(c => (
          <button key={c.v} className={`cat-chip ${statusFilter === c.v ? "active" : ""}`} onClick={() => setStatusFilter(c.v)}>
            {c.l}
          </button>
        ))}
      </div>

      <div className="ord-list">
        {items.map(o => <OrdCard key={o.id} o={o}/>)}
      </div>

      {items.length === 0 && (
        <div className="cat-empty">
          <div className="ic"><OIcons.audioFile size={26}/></div>
          <div className="t">Nessun ordine in questa categoria</div>
          <div className="s">Cambia filtro o aspetta il prossimo ordine.</div>
        </div>
      )}
    </>
  );
}

/* ─────── OFFER CARD ─────── */
function OfferCard({ o }) {
  return (
    <div className={`off-card ${o.status === "counter" ? "counter" : ""}`}>
      <div className="off-head">
        <div className="off-head-l">
          <span className="off-id">{o.id}</span>
          <span className={`ord-status ${OFF_STATUS[o.status].cls}`}>{OFF_STATUS[o.status].label}</span>
          <span className="off-time"><ClockIc size={11}/> {o.time}</span>
        </div>
        <button className="cat-icon-btn"><DotsIc size={14}/></button>
      </div>
      <div className="off-req">
        <span className="off-req-label">Richiesta</span>
        <span className="off-req-title">{o.req}</span>
      </div>
      <div className="off-grid">
        <div>
          <div className="off-grid-l">Artista</div>
          <div className="off-grid-v">
            <span className="off-av">{o.reqInit}</span>
            {o.reqOwner}
          </div>
        </div>
        <div>
          <div className="off-grid-l">Tipo</div>
          <div className="off-grid-v">{o.type}</div>
        </div>
        <div>
          <div className="off-grid-l">Prezzo offerto</div>
          <div className="off-grid-v strong">€{o.myPrice}</div>
        </div>
        <div>
          <div className="off-grid-l">Tempi</div>
          <div className="off-grid-v">{o.deadline}</div>
        </div>
      </div>
      {o.message && <p className="off-msg">"{o.message}"</p>}
      {o.counter && (
        <div className="off-counter">
          <div className="off-counter-head">
            <span className="off-counter-av">{o.reqInit}</span>
            <strong>{o.reqOwner}</strong> ha contro-offerto <span className="off-counter-price">€{o.counter.price}</span>
          </div>
          <p className="off-counter-note">"{o.counter.note}"</p>
          <div className="off-counter-acts">
            <button className="ord-btn ghost"><XIc size={11}/> Rifiuta</button>
            <button className="ord-btn primary"><CheckIc size={11}/> Accetta counter</button>
            <button className="ord-btn">Re-counter</button>
          </div>
        </div>
      )}
      {o.status === "accepted" && (
        <div className="off-accepted">
          <CheckIc size={12}/> Diventata ordine <a href="Ordine.html">{o.convertedTo}</a>
        </div>
      )}
      {(o.status === "sent" || o.status === "expired") && (
        <div className="off-acts">
          <a href="Opportunita.html" className="ord-btn ghost">Vedi richiesta</a>
          {o.status === "sent" && <button className="ord-btn">Ritira offerta</button>}
        </div>
      )}
    </div>
  );
}

/* ─────── OFFERS TAB ─────── */
function OffersTab() {
  const [filter, setFilter] = React.useState("all");
  const items = filter === "all" ? OFFERS : OFFERS.filter(o => o.status === filter);
  return (
    <>
      <div className="off-toolbar">
        <div style={{ fontSize: 13, color: "var(--muted-foreground)" }}>
          <strong style={{ color: "var(--foreground)" }}>{OFFERS.filter(o => o.status === "sent" || o.status === "counter").length}</strong> offerte attive · max 15
        </div>
        <a href="Opportunita.html" className="pf-action-btn primary">
          Sfoglia opportunità →
        </a>
      </div>
      <div className="ord-chips">
        {[
          { v: "all", l: "Tutte" },
          { v: "sent", l: "In attesa" },
          { v: "counter", l: "Counter ricevuto" },
          { v: "accepted", l: "Accettate" },
          { v: "rejected", l: "Rifiutate" },
          { v: "expired", l: "Scadute" },
        ].map(c => (
          <button key={c.v} className={`cat-chip ${filter === c.v ? "active" : ""}`} onClick={() => setFilter(c.v)}>
            {c.l}
          </button>
        ))}
      </div>
      <div className="off-list">
        {items.map(o => <OfferCard key={o.id} o={o}/>)}
      </div>
    </>
  );
}

/* ─────── SALES TAB ─────── */
function SalesTab() {
  const [groupBy, setGroupBy] = React.useState("date"); // date | beat
  const total = SALES.reduce((a, s) => a + s.net, 0);

  let groups;
  if (groupBy === "beat") {
    const map = {};
    SALES.forEach(s => {
      if (!map[s.beat]) map[s.beat] = { beat: s.beat, grad: s.grad, count: 0, revenue: 0, items: [] };
      map[s.beat].count++;
      map[s.beat].revenue += s.net;
      map[s.beat].items.push(s);
    });
    groups = Object.values(map).sort((a, b) => b.revenue - a.revenue);
  }

  return (
    <>
      <div className="off-toolbar">
        <div style={{ fontSize: 13, color: "var(--muted-foreground)" }}>
          <strong style={{ color: "var(--foreground)" }}>{SALES.length}</strong> vendite ·
          <strong style={{ color: "var(--foreground)" }}> €{total.toFixed(0)}</strong> netto totale
        </div>
        <div className="cat-sort">
          <span>Raggruppa</span>
          <select value={groupBy} onChange={(e) => setGroupBy(e.target.value)}>
            <option value="date">Per data</option>
            <option value="beat">Per beat</option>
          </select>
          <ChevDownIc size={11}/>
        </div>
      </div>

      {groupBy === "date" ? (
        <div className="cat-table">
          <div className="cat-table-head sales-head">
            <div className="cat-td">Beat</div>
            <div className="cat-td">Artista</div>
            <div className="cat-td">Licenza</div>
            <div className="cat-td">Data</div>
            <div className="cat-td cat-td-num">Lordo</div>
            <div className="cat-td cat-td-num">Netto</div>
            <div className="cat-td"></div>
          </div>
          {SALES.map(s => (
            <a href="BeatOwner.html" key={s.id} className="cat-tr sales-tr">
              <div className="cat-td cat-td-art">
                <div className={`cat-art ${s.grad}`}/>
                <div>
                  <div className="cat-tr-title">{s.beat}</div>
                  <div className="cat-tr-meta">{s.id}</div>
                </div>
              </div>
              <div className="cat-td">
                <div className="sales-artist">
                  <span className="off-av sm">{s.artistInit}</span>
                  {s.artist}
                </div>
              </div>
              <div className="cat-td">
                <span className={`cat-status ${s.license === "Esclusiva" ? "exclusive" : "neutral"}`}>{s.license}</span>
              </div>
              <div className="cat-td">{s.date}</div>
              <div className="cat-td cat-td-num">€{s.price}</div>
              <div className="cat-td cat-td-num strong">€{s.net.toFixed(2)}</div>
              <div className="cat-td cat-td-actions">
                <button className="cat-icon-btn" onClick={(e) => e.preventDefault()}><DownloadIc size={12}/></button>
                <button className="cat-icon-btn" onClick={(e) => e.preventDefault()}><DotsIc size={14}/></button>
              </div>
            </a>
          ))}
        </div>
      ) : (
        <div className="sales-by-beat">
          {groups.map(g => (
            <div className="sales-group" key={g.beat}>
              <div className="sales-group-head">
                <div className={`cat-art ${g.grad}`}/>
                <div className="sales-group-meta">
                  <div className="t">{g.beat}</div>
                  <div className="s">{g.count} vendite · €{g.revenue.toFixed(0)} netto</div>
                </div>
                <a href="BeatOwner.html" className="ord-btn">Apri beat</a>
              </div>
              <div className="sales-group-items">
                {g.items.map(s => (
                  <div className="sales-mini" key={s.id}>
                    <span className="off-av sm">{s.artistInit}</span>
                    <span className="sales-mini-who">{s.artist}</span>
                    <span className="sales-mini-date">{s.date}</span>
                    <span className={`cat-status ${s.license === "Esclusiva" ? "exclusive" : "neutral"}`}>{s.license}</span>
                    <span className="sales-mini-net">€{s.net.toFixed(2)}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

/* ─────── PAGE ─────── */
function OrdiniPage() {
  const [tab, setTab] = React.useState("orders");
  const completedCount = ORDERS.filter(o => o.status === "completed").length;
  const lifetime = 4120;
  const rating = 4.8;
  const activeOffers = OFFERS.filter(o => o.status === "sent" || o.status === "counter").length;

  return (
    <main className="page" data-screen-label="Ordini Producer">
      <div className="cat-head">
        <div className="cat-head-l">
          <h1 className="cat-h1">Ordini</h1>
          <div className="cat-head-stats">
            <span><strong>{completedCount + 40}</strong> completati</span>
            <span className="sep">·</span>
            <span>€<strong>{lifetime.toLocaleString("it-IT")}</strong> incassati</span>
            <span className="sep">·</span>
            <span><StarIc size={11}/> <strong>{rating}</strong> rating ricevuto</span>
          </div>
        </div>
      </div>

      <div className="cat-tabs">
        <button className={`cat-tab ${tab === "orders" ? "active" : ""}`} onClick={() => setTab("orders")}>
          Ordini <span className="c">{ORDERS.filter(o => o.openType === "open").length}</span>
          {ORDERS.filter(o => o.urgent).length > 0 && <span className="cat-tab-dot"/>}
        </button>
        <button className={`cat-tab ${tab === "offers" ? "active" : ""}`} onClick={() => setTab("offers")}>
          Offerte inviate <span className="c">{activeOffers}</span>
          {OFFERS.filter(o => o.status === "counter").length > 0 && <span className="cat-tab-dot"/>}
        </button>
        <button className={`cat-tab ${tab === "sales" ? "active" : ""}`} onClick={() => setTab("sales")}>
          Vendite catalog <span className="c">{SALES.length}</span>
        </button>
      </div>

      {tab === "orders" && <OrdersTab/>}
      {tab === "offers" && <OffersTab/>}
      {tab === "sales" && <SalesTab/>}
    </main>
  );
}

window.OrdiniPage = OrdiniPage;