chris/OSVauco
1
0
Fork 0
Code Issues 1 Pull Requests Actions 2 Packages Projects Releases Wiki Activity

CG3: polish header actions, wire Budsjett in sidebar, and clarify last-updated copy

Browse Source
This commit is contained in:
chrischristiansen-glitch 2026-06-09 04:01:10 +02:00
parent f48fcd7422
commit a9b8d54633
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/billing-dashboard.html
View File

@ -45,9 +45,6 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
.tb-badge.ok{background:var(--green-bg);color:var(--green);border-color:rgba(52,168,83,0.25)}
.tb-badge.warn{background:var(--yellow-bg);color:var(--yellow);border-color:rgba(251,188,4,0.25)}
.tb-badge.err{background:var(--red-bg);color:var(--red);border-color:rgba(234,67,53,0.25)}
.tb-icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--tr);border:none;background:transparent;color:var(--muted)}
.tb-icon-btn:hover{background:var(--surface-2);color:var(--text)}
.tb-icon-btn .material-symbols-outlined{font-size:20px}
.tb-period{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:13px;font-family:var(--font);padding:5px 12px;border-radius:6px;cursor:pointer;outline:none;transition:border-color var(--tr)}
.tb-period:hover{border-color:var(--border-h)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative}
@ -156,7 +153,7 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
display: none;
position: absolute;
background-color: var(--surface-2);
min-width: 100px;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: 0;
@ -176,6 +173,25 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
border-color: var(--border-h);
color: var(--text);
}
.sel {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--muted);
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-family: var(--font);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.sel:hover{
background: var(--surface-3);
border-color: var(--border-h);
color: var(--text);
}
.sel-opt {
background: transparent;
border: none;
@ -228,13 +244,21 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
<option value="30" selected>30 dager</option>
<option value="90">90 dager</option>
</select>
<button id="push-btn" class="sel" onclick="setupPushNotifications()" style="cursor:pointer" title="Aktiver push-varsler">Aktiver push-varsler</button>
<button class="sel" onclick="fetchAll()" style="cursor:pointer" title="Oppdater">&#8635;</button>
<button id="push-btn" class="sel" onclick="setupPushNotifications()" title="Aktiver push-varsler">
<span class="material-symbols-outlined" style="font-size:16px">notifications</span>
<span>Push</span>
</button>
<button class="sel" onclick="fetchAll()" title="Oppdater">
<span class="material-symbols-outlined" style="font-size:16px">refresh</span>
</button>
<div class="dropdown">
<button class="sel">Eksporter</button>
<button class="sel">
<span class="material-symbols-outlined" style="font-size:16px">download</span>
<span>Eksport</span>
</button>
<div class="dropdown-content">
<a href="#" onclick="exportCSV()">CSV</a>
<a href="#" onclick="exportPDF()">PDF</a>
<a href="#" onclick="exportCSV()">Eksporter som CSV</a>
<a href="#" onclick="exportPDF()">Eksporter til PDF</a>
</div>
</div>
<div class="sep"></div>
@ -251,7 +275,7 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
<div class="layout">
<nav class="sidebar">
<div class="nav-section">Oversikt</div>
<div class="nav-item active">
<div class="nav-item active" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<span class="material-symbols-outlined">bar_chart</span>Billing
</div>
<div class="nav-item">
@ -261,7 +285,7 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
<span class="material-symbols-outlined">trending_up</span>Prognoser
</div>
<div class="nav-section" style="margin-top:12px">Innstillinger</div>
<div class="nav-item">
<div class="nav-item" onclick="openBudgetModal()">
<span class="material-symbols-outlined">account_balance_wallet</span>Budsjett
</div>
<div class="nav-item">
@ -628,7 +652,9 @@ function renderAll(){
if (forecast) {
updateKPIs(forecast, anomalies.length);
}
document.getElementById('footer-txt').textContent='Sist oppdatert '+new Date().toLocaleTimeString('no-NO',{hour:'2-digit',minute:'2-digit'});
const ts = new Date().toLocaleTimeString('no-NO',{hour:'2-digit',minute:'2-digit'});
document.getElementById('footer-txt').textContent='Sist oppdatert '+ts;
document.getElementById('last-updated').textContent='Sist oppdatert '+ts;
const monthName = new Date().toLocaleString('no-NO', { month: 'long' });
document.getElementById('budget-month').textContent = monthName.charAt(0).toUpperCase() + monthName.slice(1) + " " + new Date().getFullYear();
}
@ -645,8 +671,6 @@ function buildBar(labels, costs){
document.getElementById('bar-empty').style.display='none';
document.getElementById('bar-chart').style.display='block';
const avgC=costs.reduce((a,b)=>a+b,0)/costs.length;
barChart=new Chart(ctx,{type:'bar',data:{labels,datasets:[
{label:'Kostnad',data:costs,backgroundColor:'rgba(124,92,255,0.55)',borderRadius:4,borderSkipped:false}
]},options:{responsive:true,maintainAspectRatio:false,