<div class="page-content" id="page-projekt">
<h1 class="page-title">Affärer</h1>
<p class="page-subtitle">Pipeline och affärsöversikt</p>
<!-- Stats row -->
<div id="dealStatsRow" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px">
<div id="dPillOffert" onclick="setDealQuickFilter('offert')" style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#fefce8;border:1px solid #fde68a;border-radius:8px;cursor:pointer;transition:all .15s" title="Filtrera på Offert"><span style="width:8px;height:8px;border-radius:50%;background:#eab308"></span><span style="font-size:12px;font-weight:600;color:#92400e">Offert</span><span style="font-size:12px;font-weight:700;color:#92400e" id="dStatOffert">0</span><span style="font-size:10px;color:#a16207" id="dSumOffert"></span></div>
<div id="dPillOrder" onclick="setDealQuickFilter('order')" style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#f0fdf4;border:1px solid #86efac;border-radius:8px;cursor:pointer;transition:all .15s" title="Filtrera på Order"><span style="width:8px;height:8px;border-radius:50%;background:#16a34a"></span><span style="font-size:12px;font-weight:600;color:#166534">Order</span><span style="font-size:12px;font-weight:700;color:#166534" id="dStatOrder">0</span><span style="font-size:10px;color:#15803d" id="dSumOrder"></span></div>
<div id="dPillPagaende" onclick="setDealQuickFilter('pagaende')" style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;cursor:pointer;transition:all .15s" title="Filtrera på Pågående"><span style="width:8px;height:8px;border-radius:50%;background:#3b82f6"></span><span style="font-size:12px;font-weight:600;color:#1e40af">Pågående</span><span style="font-size:12px;font-weight:700;color:#1e40af" id="dStatPagaende">0</span><span style="font-size:10px;color:#1d4ed8" id="dSumPagaende"></span></div>
<div id="dPillFardig" onclick="setDealQuickFilter('fardig')" style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#f0fdf4;border:1px solid #6ee7b7;border-radius:8px;cursor:pointer;transition:all .15s" title="Filtrera på Klart"><span style="width:8px;height:8px;border-radius:50%;background:#10b981"></span><span style="font-size:12px;font-weight:600;color:#065f46">Klart</span><span style="font-size:12px;font-weight:700;color:#065f46" id="dStatFardig">0</span><span style="font-size:10px;color:#047857" id="dSumFardig"></span></div>
<div id="dPillLost" onclick="setDealQuickFilter('lost')" style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;cursor:pointer;transition:all .15s" title="Filtrera på Ånger"><span style="width:8px;height:8px;border-radius:50%;background:#ef4444"></span><span style="font-size:12px;font-weight:600;color:#991b1b">Ånger</span><span style="font-size:12px;font-weight:700;color:#991b1b" id="dStatLost">0</span><span style="font-size:10px;color:#b91c1c" id="dSumLost"></span></div>
</div>
<!-- Toolbar -->
<div style="display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
<button class="dummy-btn" onclick="showNewDealModal()">+ Ny affär</button>
<select id="dealFilterStatus" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla statusar</option>
<option value="offert">Offert</option>
<option value="order">Order</option>
<option value="projektering">Projektering</option>
<option value="bestallning">Beställning</option>
<option value="leverans">Leverans</option>
<option value="montering">Montering</option>
<option value="besiktning">Besiktning</option>
<option value="fardigstall">Färdigställt</option>
<option value="anger">Ånger</option>
<option value="ej_godkand">Ej godkänd</option>
<option value="avbrott">Avbrott</option>
</select>
<select id="dealFilterProduct" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla produkter</option>
<option value="solceller">Solceller</option>
<option value="sol_batteri">Sol & Batteri</option>
<option value="batteri">Batteri</option>
<option value="tak">Tak</option>
<option value="fonster">Fönster</option>
<option value="luftvarmepump">Luftvärmepump</option>
<option value="laddbox">Laddbox</option>
<option value="isolering">Isolering</option>
<option value="taktvatt">Taktvätt</option>
<option value="utvandig_malning">Utvändig målning</option>
<option value="fagelband">Fågelband</option>
</select>
<select id="dealFilterMonth" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla månader</option>
</select>
<select id="dealFilterSaljStatus" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla säljstatus</option>
<option value="godkand">Godkänd</option>
<option value="anger">ÅNGER</option>
<option value="inte_godkand">Inte godkänd</option>
<option value="ej_hanterad">Ej hanterad</option>
<option value="avvakta">Avvakta</option>
<option value="underpris">Underpris</option>
<option value="halv_provis">Halv provis</option>
<option value="ingen_provis">Ingen provis</option>
<option value="raddad_anger">Räddad ånger</option>
<option value="anger_fraga">Ånger?</option>
<option value="senare_loneunderlag">Senare löneunderlag</option>
</select>
<select id="dealFilterRegion" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla regioner</option>
</select>
</div>
<!-- Table view (DataTable) -->
<div id="dealTableView">
<table id="dealsDT" class="display" style="width:100%">
<thead><tr>
<th>Affärsnr</th><th>Kund</th><th>Produkter</th><th style="text-align:right">Ordervärde</th><th>Säljare</th><th>Datum</th><th>Status</th><th>Status sälj</th><th>Status order</th><th>Region</th>
</tr></thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- PRODUKTKATALOG -->