platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Passwordless cross-device authentication

Browse Source 
- Arkitektur: docs/auth/passwordless-architecture.md
- Backend: iom/quixzoom-auth-service/ (FastAPI + Redis)
- Webb: quixzoom-market-pages/se/login/ (QR-kod + polling)
- App: iom/quixzoom-app/src/features/auth/ (push + deep links)

Flöde: QR-kod → app-godkännande → webb-inloggad
This commit is contained in:
Bernt
2026-07-07 07:11:50 +00:00
parent 4aa984ad74
commit 6989a98d75
61843 changed files with 5491611 additions and 872231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quixzoom-landing-fixed/revenue.html
+77 -77
View File
@@ -23,7 +23,7 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-
.sidebar-logo .meta{font-size:11px;color:rgba(255,255,255,.75);margin-top:3px}
.sidebar-section{padding:16px 12px 6px}
.sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.75);text-transform:uppercase;padding:0 8px;margin-bottom:6px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;font-weight:500;transition:all .15s;border:none;background:none;width:100%;text-align:left}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius: var(--radius-md);cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;font-weight:500;transition:all .15s;border:none;background:none;width:100%;text-align:left}
.sidebar-item:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-item.active{background:var(--qx);color:#fff}
.sidebar-item .icon{font-size:15px;width:22px;text-align:center;flex-shrink:0}
@@ -35,27 +35,27 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-
.topbar-breadcrumb{font-size:12px;color:var(--text3)}
.topbar-actions{display:flex;gap:8px;align-items:center}
.content{padding:24px 28px;flex:1}
.tabs{display:flex;gap:4px;background:var(--surface);border-radius:10px;padding:4px;border:1px solid var(--border);width:fit-content;margin-bottom:20px}
.tab{padding:7px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);border:none;background:none;transition:all .15s}
.tabs{display:flex;gap:4px;background:var(--surface);border-radius: var(--radius-md);padding:4px;border:1px solid var(--border);width:fit-content;margin-bottom:20px}
.tab{padding:7px 18px;border-radius: var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);border:none;background:none;transition:all .15s}
.tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.view{display:none}.view.active{display:block}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius: var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--qx);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--qx);border-radius:3px 3px 0 0}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:18px 20px;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--qx);border-radius: var(--radius-sm) 3px 0 0}
.stat-card.g::after{background:var(--green)}.stat-card.r::after{background:var(--red)}.stat-card.b::after{background:var(--blue)}.stat-card.p::after{background:var(--purple)}.stat-card.y::after{background:var(--yellow)}
.stat-card .label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.stat-card .value{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stat-card .sub{font-size:11px;color:var(--text3);margin-top:5px}
.stat-card .change{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;display:inline-block;margin-top:5px}
.stat-card .change{font-size:11px;font-weight:700;padding:2px 7px;border-radius: var(--radius-xl);display:inline-block;margin-top:5px}
.change-up{background:#dcfce7;color:#166534}.change-flat{background:#f1f5f9;color:#475569}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius: var(--radius-xl);font-size:11px;font-weight:700;white-space:nowrap}
.badge-green{background:#dcfce7;color:#166534}.badge-red{background:#fee2e2;color:#991b1b}.badge-yellow{background:#fef9c3;color:#854d0e}.badge-blue{background:#dbeafe;color:#1e40af}.badge-gray{background:#f1f5f9;color:#475569}.badge-orange{background:#ffedd5;color:#9a3412}.badge-purple{background:#ede9fe;color:#4c1d95}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);overflow:hidden;margin-bottom:20px}
.table-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.table-header h3{font-size:14px;font-weight:700}
.table-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@@ -70,40 +70,40 @@ td.mono{font-variant-numeric:tabular-nums;font-family:'SF Mono',monospace;font-s
.tbl-scroll{overflow-x:auto}
.section-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
/* CHARTS */
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:20px;margin-bottom:20px}
.chart-card h3{font-size:14px;font-weight:700;margin-bottom:16px}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{width:100%;border-radius:4px 4px 0 0;background:var(--qx);opacity:.8;transition:opacity .15s;cursor:pointer;position:relative}
.bar{width:100%;border-radius: var(--radius-sm) 4px 0 0;background:var(--qx);opacity:.8;transition:opacity .15s;cursor:pointer;position:relative}
.bar:hover{opacity:1}
.bar-label{font-size:10px;color:var(--text3);white-space:nowrap}
.bar-value{font-size:10px;font-weight:700;color:var(--text2)}
/* ZOOMER CARDS */
.zoomer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px}
.zoomer-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;transition:box-shadow .15s}
.zoomer-card{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:18px;transition:box-shadow .15s}
.zoomer-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.zoomer-card .zc-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.zc-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--qx),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
.zc-avatar{width:40px;height:40px;border-radius: var(--radius-full);background:linear-gradient(135deg,var(--qx),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
.zc-name{font-size:14px;font-weight:700}
.zc-role{font-size:11px;color:var(--text3)}
.zc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.zc-stat{text-align:center;background:var(--surface);border-radius:8px;padding:8px 4px}
.zc-stat{text-align:center;background:var(--surface);border-radius: var(--radius-md);padding:8px 4px}
.zc-stat .cs-val{font-size:15px;font-weight:800;color:var(--text)}
.zc-stat .cs-lbl{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.06em}
/* GEO */
.geo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.geo-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.geo-card{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:16px}
.geo-card .gc-name{font-size:13px;font-weight:700;margin-bottom:6px}
.geo-bar-wrap{height:6px;background:var(--surface);border-radius:3px;margin-bottom:6px;overflow:hidden}
.geo-bar{height:100%;background:var(--qx);border-radius:3px;transition:width .5s}
.geo-bar-wrap{height:6px;background:var(--surface);border-radius: var(--radius-sm);margin-bottom:6px;overflow:hidden}
.geo-bar{height:100%;background:var(--qx);border-radius: var(--radius-sm);transition:width .5s}
.geo-meta{font-size:11px;color:var(--text2)}
/* DAC7 */
.dac7-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}
.dac7-donut{width:120px;height:120px;border-radius:50%;position:relative;margin:0 auto 12px}
.compliance-meter{height:12px;background:var(--surface);border-radius:6px;overflow:hidden;margin-bottom:8px}
.compliance-fill{height:100%;border-radius:6px;background:var(--green);transition:width .5s}
.dac7-panel{background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:20px;margin-bottom:20px}
.dac7-donut{width:120px;height:120px;border-radius: var(--radius-full);position:relative;margin:0 auto 12px}
.compliance-meter{height:12px;background:var(--surface);border-radius: var(--radius-sm);overflow:hidden;margin-bottom:8px}
.compliance-fill{height:100%;border-radius: var(--radius-sm);background:var(--green);transition:width .5s}
/* PAYOUT */
.payout-card{background:linear-gradient(135deg,#1A1A2E,#16213E);color:#fff;border-radius:14px;padding:24px;margin-bottom:20px}
.payout-card{background:linear-gradient(135deg,#1A1A2E,#16213E);color:#fff;border-radius: var(--radius-lg);padding:24px;margin-bottom:20px}
.payout-card .pc-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:8px}
.payout-card .pc-amount{font-size:36px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}
.payout-card .pc-sub{font-size:13px;color:rgba(255,255,255,.6)}
@@ -147,17 +147,17 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
</div>
<div class="sidebar-section">
<div class="sidebar-section-label">quiXzoom</div>
<button class="sidebar-item" onclick="location.href='launch.html'"><span class="icon">🚀</span>Launch Center</button>
<button class="sidebar-item active"><span class="icon">💰</span>Revenue Dashboard</button>
<button class="sidebar-item" onclick="location.href='admin.html'"><span class="icon">⚙️</span>Admin</button>
<button class="sidebar-item" onclick="location.href='dac7-reporting.html'"><span class="icon">🏛️</span>DAC7 Reporting</button>
<button class="sidebar-item" onclick="location.href='zoomer-earnings.html'"><span class="icon">📊</span>Zoomer Earnings</button>
<button class="sidebar-item" onclick="location.href='launch.html'"><span class="icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2L10 8L14 9L8 14L6 8L2 7L8 2Z" fill="#666"/></svg></span>Launch Center</button>
<button class="sidebar-item active"><span class="icon"></span>Revenue Dashboard</button>
<button class="sidebar-item" onclick="location.href='admin.html'"><span class="icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3" stroke="#666" stroke-width="1.5"/><path d="M8 2V4M8 12V14M2 8H4M12 8H14M4.3 4.3L5.7 5.7M10.3 10.3L11.7 11.7M4.3 11.7L5.7 10.3M10.3 5.7L11.7 4.3" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg></span>Admin</button>
<button class="sidebar-item" onclick="location.href='dac7-reporting.html'"><span class="icon"></span>DAC7 Reporting</button>
<button class="sidebar-item" onclick="location.href='zoomer-earnings.html'"><span class="icon"></span>Zoomer Earnings</button>
</div>
<div class="sidebar-section">
<div class="sidebar-section-label">Utbetalningar</div>
<button class="sidebar-item"><span class="icon">✅</span>Godkända</button>
<button class="sidebar-item"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#22c55e" stroke-width="2"/><path d="M6 10L9 13L14 7" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Godkända</button>
<button class="sidebar-item"><span class="icon">⏳</span>Väntande</button>
<button class="sidebar-item"><span class="icon">❌</span>Misslyckade</button>
<button class="sidebar-item"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#ef4444" stroke-width="2"/><path d="M7 7L13 13M13 7L7 13" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/></svg></span>Misslyckade</button>
</div>
<div class="sidebar-footer">
<button class="sidebar-item" onclick="location.href='../ouroboros/index.html'"><span class="icon">←</span>Ouroboros</button>
@@ -170,7 +170,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<div class="topbar-left">
<span class="topbar-breadcrumb">quiXzoom</span>
<span style="color:var(--text3)">›</span>
<span class="topbar-title">💰 Revenue Dashboard</span>
<span class="topbar-title"> Revenue Dashboard</span>
</div>
<div class="topbar-actions">
<select class="btn btn-secondary btn-sm" id="periodFilter" onchange="renderAll()" style="border:1px solid var(--border)">
@@ -179,7 +179,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<option value="apr2026">April 2026</option>
<option value="q2">Q2 2026</option>
</select>
<button class="btn btn-primary btn-sm" onclick="exportCSV()">📥 Exportera CSV</button>
<button class="btn btn-primary btn-sm" onclick="exportCSV()"> Exportera CSV</button>
</div>
</div>
@@ -221,11 +221,11 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<!-- TABS -->
<div class="tabs">
<button class="tab active" onclick="switchTab('overview',this)">📊 Översikt</button>
<button class="tab" onclick="switchTab('zoomers',this)">👤 Per zoomer</button>
<button class="tab" onclick="switchTab('payouts',this)">💸 Utbetalningar</button>
<button class="tab" onclick="switchTab('geo',this)">🌍 Geografi</button>
<button class="tab" onclick="switchTab('dac7',this)">🏛️ DAC7</button>
<button class="tab active" onclick="switchTab('overview',this)"> Översikt</button>
<button class="tab" onclick="switchTab('zoomers',this)"> Per zoomer</button>
<button class="tab" onclick="switchTab('payouts',this)"> Utbetalningar</button>
<button class="tab" onclick="switchTab('geo',this)"> Geografi</button>
<button class="tab" onclick="switchTab('dac7',this)"> DAC7</button>
</div>
<!-- OVERVIEW -->
@@ -234,24 +234,24 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<div class="payout-card">
<div class="pc-title">Nästa utbetalningsdatum</div>
<div class="pc-amount" id="pcAmount">132 450 kr</div>
<div class="pc-sub">📅 <span id="pcDate">1 augusti 2026</span> — <span id="pcCount">23 zoomers</span> väntar på utbetalning</div>
<div class="pc-sub"> <span id="pcDate">1 augusti 2026</span> — <span id="pcCount">23 zoomers</span> väntar på utbetalning</div>
<div style="margin-top:16px;display:flex;gap:8px">
<button class="btn btn-sm" style="background:var(--qx);color:#fff">🚀 Initiera utbetalning</button>
<button class="btn btn-sm" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)">📋 Granska lista</button>
<button class="btn btn-sm" style="background:var(--qx);color:#fff"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2L10 8L14 9L8 14L6 8L2 7L8 2Z" fill="#666"/></svg> Initiera utbetalning</button>
<button class="btn btn-sm" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="3" y="2" width="10" height="12" rx="1" stroke="#666" stroke-width="1.5"/><path d="M6 5H10M6 8H10M6 11H8" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg> Granska lista</button>
</div>
</div>
<!-- REVENUE CHART -->
<div class="chart-card">
<h3>📈 Intjänat per månad (2026)</h3>
<h3><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 12L6 8L9 11L14 5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 5H14V9" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Intjänat per månad (2026)</h3>
<div class="bar-chart" id="revenueChart"></div>
</div>
<!-- STRIPE CONNECT SUMMARY -->
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px">
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px">
<div style="background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:18px">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<div style="width:32px;height:32px;background:#635BFF;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px">$</div>
<div style="width:32px;height:32px;background:#635BFF;border-radius: var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px">$</div>
<div>
<div style="font-size:12px;font-weight:700">Stripe Connect</div>
<div style="font-size:11px;color:var(--text3)">Betalningsplattform</div>
@@ -259,27 +259,27 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
</div>
<div style="font-size:11px;color:var(--text2)">Anslutna konton: <strong id="stripeConnected">0</strong></div>
<div style="font-size:11px;color:var(--text2)">Under granskning: <strong id="stripeReview">0</strong></div>
<div style="margin-top:10px"><span class="badge badge-green">● Live</span></div>
<div style="margin-top:10px"><span class="badge badge-green"> Live</span></div>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px">
<div style="font-size:12px;font-weight:700;margin-bottom:12px">📊 Utbetalningsstatus</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:18px">
<div style="font-size:12px;font-weight:700;margin-bottom:12px"> Utbetalningsstatus</div>
<div id="payoutStatusChart"></div>
</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px">
<div style="font-size:12px;font-weight:700;margin-bottom:12px">⭐ Genomsnittlig rating</div>
<div style="background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md);padding:18px">
<div style="font-size:12px;font-weight:700;margin-bottom:12px"> Genomsnittlig rating</div>
<div style="font-size:36px;font-weight:900;letter-spacing:-.02em;color:var(--yellow)" id="avgRating">4.7</div>
<div style="font-size:11px;color:var(--text2)">Baserat på <span id="ratingCount">0</span> omdömen</div>
<div style="margin-top:8px;font-size:18px">⭐⭐⭐⭐⭐</div>
<div style="margin-top:8px;font-size:18px"></div>
</div>
</div>
</div>
<!-- PER ZOOMER -->
<div class="view" id="view-zoomers">
<div class="table-header" style="background:var(--card);border:1px solid var(--border);border-radius:12px 12px 0 0;padding:14px 20px;margin-bottom:0">
<h3>👤 Per zoomer</h3>
<div class="table-header" style="background:var(--card);border:1px solid var(--border);border-radius: var(--radius-md) 12px 0 0;padding:14px 20px;margin-bottom:0">
<h3> Per zoomer</h3>
<div class="table-header-actions">
<input type="text" class="btn btn-secondary btn-sm" placeholder="🔍 Sök zoomer..." id="zoomerSearch" oninput="filterZoomers()" style="min-width:200px;text-align:left">
<input type="text" class="btn btn-secondary btn-sm" placeholder="<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#666" stroke-width="2"/><path d="M11 11L14 14" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg> Sök zoomer..." id="zoomerSearch" oninput="filterZoomers()" style="min-width:200px;text-align:left">
<select class="btn btn-secondary btn-sm" id="zoomerStatusFilter" onchange="filterZoomers()" style="border:1px solid var(--border)">
<option value="">Alla</option>
<option value="active">Aktiva</option>
@@ -287,7 +287,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
</select>
</div>
</div>
<div class="tbl-scroll" style="background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;margin-bottom:20px">
<div class="tbl-scroll" style="background:var(--card);border:1px solid var(--border);border-top:none;border-radius: 0 0 12px 12px;margin-bottom:20px">
<table>
<thead>
<tr><th>Zoomer</th><th>Land</th><th class="right">Uppdrag</th><th class="right">Intjänat</th><th class="right">Rating</th><th>Status</th><th>Utbetalning</th><th>Åtgärd</th></tr>
@@ -301,7 +301,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<div class="view" id="view-payouts">
<div class="table-wrap">
<div class="table-header">
<h3>💸 Utbetalningshistorik</h3>
<h3> Utbetalningshistorik</h3>
<div class="table-header-actions">
<select class="btn btn-secondary btn-sm" id="payoutStatusFilter2" onchange="filterPayouts()" style="border:1px solid var(--border)">
<option value="">Alla statusar</option>
@@ -322,7 +322,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<!-- GEO -->
<div class="view" id="view-geo">
<div class="section-title">🌍 Geografisk fördelning</div>
<div class="section-title"> Geografisk fördelning</div>
<div class="geo-grid" id="geoGrid"></div>
</div>
@@ -331,10 +331,10 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
<div class="dac7-panel">
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px">
<div>
<h3 style="font-size:15px;font-weight:700;margin-bottom:4px">🏛️ DAC7 Compliance</h3>
<h3 style="font-size:15px;font-weight:700;margin-bottom:4px"> DAC7 Compliance</h3>
<p style="font-size:12px;color:var(--text2)">EU-direktiv 2021/514 — rapportering av plattformsekonomin</p>
</div>
<button class="btn btn-primary btn-sm">📥 Exportera DAC7-rapport</button>
<button class="btn btn-primary btn-sm"> Exportera DAC7-rapport</button>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px">
@@ -350,8 +350,8 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
</div>
</div>
<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px;font-size:12px;color:#854d0e">
<strong>⚠️ DAC7 deadline:</strong> Rapportering för kalenderår 2026 ska lämnas till Skatteverket senast <strong>31 januari 2027</strong>. Zoomers med intäkter &gt; 2 000 EUR eller &gt; 25 transaktioner måste ha verifierat TIN/PNR.
<div style="background:#fffbeb;border:1px solid #fde68a;border-radius: var(--radius-md);padding:14px;font-size:12px;color:#854d0e">
<strong><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 3L17 17H3L10 3Z" stroke="#f59e0b" stroke-width="2"/><path d="M10 8V12M10 14V14.5" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/></svg> DAC7 deadline:</strong> Rapportering för kalenderår 2026 ska lämnas till Skatteverket senast <strong>31 januari 2027</strong>. Zoomers med intäkter &gt; 2 000 EUR eller &gt; 25 transaktioner måste ha verifierat TIN/PNR.
</div>
</div>
</div>
@@ -361,7 +361,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
</div>
<script>
// ── DATA ─────────────────────────────────────────────────────────────────
// DATA
const zoomers = [];
const payoutHistory = [];
@@ -383,15 +383,15 @@ const monthlyRevenue = [
];
const geoData = [
{ country:'Sverige', flag:'🇸🇪', zoomers:5, earned:142000, pct:52 },
{ country:'Norge', flag:'🇳🇴', zoomers:2, earned:52300, pct:19 },
{ country:'Danmark', flag:'🇩🇰', zoomers:2, earned:41100, pct:15 },
{ country:'Tyskland',flag:'🇩🇪', zoomers:3, earned:66600, pct:24 },
{ country:'Nederländerna',flag:'🇳🇱', zoomers:2, earned:31200, pct:11 },
{ country:'Portugal',flag:'🇵🇹', zoomers:1, earned:8500, pct:3 },
{ country:'Sverige', flag:'<span class="flag-se">SE</span>', zoomers:5, earned:142000, pct:52 },
{ country:'Norge', flag:'', zoomers:2, earned:52300, pct:19 },
{ country:'Danmark', flag:'', zoomers:2, earned:41100, pct:15 },
{ country:'Tyskland',flag:'', zoomers:3, earned:66600, pct:24 },
{ country:'Nederländerna',flag:'', zoomers:2, earned:31200, pct:11 },
{ country:'Portugal',flag:'', zoomers:1, earned:8500, pct:3 },
];
// ── COMPUTED ──────────────────────────────────────────────────────────────────
// COMPUTED
const totalEarned = zoomers.reduce((s,z) => s+z.earned, 0);
const totalAssignments = zoomers.reduce((s,z) => s+z.assignments, 0);
const activeCount = zoomers.filter(z => z.status==='active').length;
@@ -402,7 +402,7 @@ const dac7Pct = Math.round(tinVerified/zoomers.length*100);
const avgRating = (zoomers.reduce((s,z) => s+z.rating, 0)/zoomers.length).toFixed(1);
const totalRatingCount = zoomers.reduce((s,z) => s+z.assignments, 0);
// ── RENDER ALL ────────────────────────────────────────────────────────────────
// RENDER ALL
function renderAll() {
// Stats
document.getElementById('statTotal').textContent = fmtK(totalEarned)+' kr';
@@ -444,9 +444,9 @@ function renderPayoutStatusChart() {
const failed = payoutHistory.filter(p=>p.status==='failed').length;
document.getElementById('payoutStatusChart').innerHTML = `
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;justify-content:space-between;align-items:center"><span class="badge badge-green">✓ Sent</span><strong>${sent}</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center"><span class="badge badge-green"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Sent</span><strong>${sent}</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center"><span class="badge badge-yellow">⏳ Pending</span><strong>${pending}</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center"><span class="badge badge-red">✕ Failed</span><strong>${failed}</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center"><span class="badge badge-red"> Failed</span><strong>${failed}</strong></div>
</div>`;
}
@@ -455,7 +455,7 @@ function renderZoomerTable(data) {
<tr>
<td>
<div style="display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--qx),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0">${z.name.split(' ').map(n=>n[0]).join('')}</div>
<div style="width:32px;height:32px;border-radius: var(--radius-full);background:linear-gradient(135deg,var(--qx),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0">${z.name.split(' ').map(n=>n[0]).join('')}</div>
<div>
<div style="font-weight:700;font-size:13px">${z.name}</div>
<div style="font-size:11px;color:var(--text3)">${z.email}</div>
@@ -465,8 +465,8 @@ function renderZoomerTable(data) {
<td>${z.flag} ${z.country}</td>
<td class="right">${z.assignments}</td>
<td class="right mono"><strong>${fmt(z.earned)} kr</strong></td>
<td class="right">⭐ ${z.rating}</td>
<td><span class="badge ${z.status==='active'?'badge-green':'badge-gray'}">${z.status==='active'?'● Aktiv':'○ Inaktiv'}</span></td>
<td class="right"> ${z.rating}</td>
<td><span class="badge ${z.status==='active'?'badge-green':'badge-gray'}">${z.status==='active'?' Aktiv':' Inaktiv'}</span></td>
<td><span class="badge ${payoutBadge(z.payout)}">${payoutLabel(z.payout)}</span></td>
<td><button class="btn btn-xs btn-secondary">Detaljer</button></td>
</tr>`).join('');
@@ -517,16 +517,16 @@ function renderDAC7() {
document.getElementById('dac7Total').textContent = zoomers.length;
document.getElementById('dac7StatusList').innerHTML = `
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)">✅ TIN verifierat</span><strong style="color:var(--green)">${tinVerified}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#22c55e" stroke-width="2"/><path d="M6 10L9 13L14 7" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> TIN verifierat</span><strong style="color:var(--green)">${tinVerified}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)">⏳ Saknar TIN</span><strong style="color:var(--red)">${zoomers.length-tinVerified}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)">📋 Rapporteringspliktiga</span><strong>${zoomers.filter(z=>z.earned>25000||z.assignments>25).length}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)">🏳️ Under tröskel</span><strong style="color:var(--text3)">${zoomers.filter(z=>z.earned<=25000&&z.assignments<=25).length}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="3" y="2" width="10" height="12" rx="1" stroke="#666" stroke-width="1.5"/><path d="M6 5H10M6 8H10M6 11H8" stroke="#666" stroke-width="1.5" stroke-linecap="round"/></svg> Rapporteringspliktiga</span><strong>${zoomers.filter(z=>z.earned>25000||z.assignments>25).length}</strong></div>
<div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:var(--text2)"> Under tröskel</span><strong style="color:var(--text3)">${zoomers.filter(z=>z.earned<=25000&&z.assignments<=25).length}</strong></div>
</div>`;
}
// ── UTILS ─────────────────────────────────────────────────────────────────────
// UTILS
function payoutBadge(s) { return {sent:'badge-green',pending:'badge-yellow',failed:'badge-red'}[s]||'badge-gray'; }
function payoutLabel(s) { return {sent:'✓ Sent',pending:'⏳ Pending',failed:'✕ Failed'}[s]||s; }
function payoutLabel(s) { return {sent:'<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Sent',pending:'⏳ Pending',failed:' Failed'}[s]||s; }
function fmt(n) { return Math.round(n).toLocaleString('sv-SE'); }
function fmtK(n) { return n>=1000000?(n/1000000).toFixed(1)+'M':n>=1000?Math.round(n/1000)+'k':Math.round(n).toString(); }