BOC v1.0: RS256 auth, Ledger integration, Prometheus metrics, CI/CD, backup
This commit is contained in:
Bernt
@@ -0,0 +1,101 @@
|
||||
# BOC Frontend Refactor Proposal
|
||||
|
||||
## Problem
|
||||
12 HTML-filer (dashboard.html, crm.html, sales.html, ...) var och en med ~80 rader identisk sidebar-kod. En ändring = 12 filer att uppdatera. Risk för divergens.
|
||||
|
||||
## Alternativ
|
||||
|
||||
### A. Vanilla JS Component System (Rekommenderas)
|
||||
Ett enda HTML-skelett, JavaScript laddar modul-innehåll dynamiskt.
|
||||
|
||||
```
|
||||
web/
|
||||
index.html # Single shell: sidebar + main container
|
||||
assets/
|
||||
boc.js # Router + auth + API
|
||||
components.js # Sidebar, Header, KPI cards, Tables
|
||||
modules/
|
||||
dashboard.js # Dashboard-specific rendering
|
||||
crm.js # CRM module
|
||||
sales.js # Sales module
|
||||
...
|
||||
```
|
||||
|
||||
**Fördelar:**
|
||||
- En sidebar, en källa till sanning
|
||||
- Ingen build step (vanilla JS)
|
||||
- Fungerar med nuvarande nginx static hosting
|
||||
- ~2h att implementera
|
||||
|
||||
**Nackdelar:**
|
||||
- Ingen type safety
|
||||
- Manuell DOM-hantering
|
||||
|
||||
### B. HTMX + Go Templates
|
||||
Go backend servar HTML fragments. HTMX swappar innehåll.
|
||||
|
||||
```
|
||||
backend/templates/
|
||||
layout.html # Shell med sidebar
|
||||
dashboard.html # Fragment
|
||||
crm/
|
||||
list.html
|
||||
detail.html
|
||||
```
|
||||
|
||||
**Fördelar:**
|
||||
- Server-side rendering, SEO-vänligt
|
||||
- Minimal JS
|
||||
- Go standard library
|
||||
|
||||
**Nackdelar:**
|
||||
- Kräver template engine i backend
|
||||
- Mindre interaktivt utan extra JS
|
||||
|
||||
### C. Lit/Web Components (Modern vanilla)
|
||||
Web standard, inget framework. Lit ger reaktivitet.
|
||||
|
||||
**Fördelar:**
|
||||
- Web standard, inget build step med import maps
|
||||
- Reaktiva komponenter
|
||||
- Framtidssäkert
|
||||
|
||||
**Nackdelar:**
|
||||
- Learning curve
|
||||
- ~4h att implementera
|
||||
|
||||
### D. Full SPA (React/Vue/Svelte)
|
||||
**AVVISAS** — För tungt för adminplattform. Byggsteg, bundle size, komplexitet.
|
||||
|
||||
## Rekommendation: Alternativ A (Vanilla JS Router)
|
||||
|
||||
Snabbast att implementera, lättast att underhålla, matchar nuvarande arkitektur.
|
||||
|
||||
### Implementation (estimerad 2-3h):
|
||||
1. `index.html` — shell med sidebar + `<main id="app">`
|
||||
2. `assets/router.js` — hash-based routing (`#/crm`, `#/sales`)
|
||||
3. `assets/components.js` — `renderSidebar()`, `renderKpiGrid()`, `renderTable()`
|
||||
4. `assets/modules/*.js` — en fil per modul, exporterar `render()`
|
||||
5. Sidebar-markup i ett JSON-objekt, renderas dynamiskt
|
||||
|
||||
### Exempel:
|
||||
```js
|
||||
// router.js
|
||||
const routes = {
|
||||
'/': () => import('./modules/dashboard.js'),
|
||||
'/crm': () => import('./modules/crm.js'),
|
||||
'/sales': () => import('./modules/sales.js'),
|
||||
// ...
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
const path = location.hash.slice(1) || '/';
|
||||
routes[path]().then(m => m.render(document.getElementById('app')));
|
||||
});
|
||||
```
|
||||
|
||||
### Migration path:
|
||||
1. Skapa shell + router
|
||||
2. Konvertera en modul (dashboard) som proof-of-concept
|
||||
3. Konvertera resten en i taget
|
||||
4. Ta bort gamla HTML-filer
|
||||
@@ -0,0 +1,141 @@
|
||||
// BOC — Business Operations Center
|
||||
// Single-page app shell. One sidebar, dynamic modules.
|
||||
// Linus principle: write it once, route everything through it.
|
||||
|
||||
const API_BASE = '/api/v1';
|
||||
|
||||
// Module registry — add new modules here
|
||||
const modules = {
|
||||
'/': () => import('./modules/dashboard.js'),
|
||||
'/crm': () => import('./modules/crm.js'),
|
||||
'/sales': () => import('./modules/sales.js'),
|
||||
'/finance': () => import('./modules/finance.js'),
|
||||
'/hr': () => import('./modules/hr.js'),
|
||||
'/legal': () => import('./modules/legal.js'),
|
||||
'/marketing': () => import('./modules/marketing.js'),
|
||||
'/support': () => import('./modules/support.js'),
|
||||
'/automation': () => import('./modules/automation.js'),
|
||||
};
|
||||
|
||||
// Sidebar configuration — one source of truth
|
||||
const sidebarItems = [
|
||||
{ path: '/', label: 'Dashboard', icon: 'grid' },
|
||||
{ path: '/crm', label: 'CRM', icon: 'users' },
|
||||
{ path: '/sales', label: 'Sales', icon: 'dollar' },
|
||||
{ path: '/finance', label: 'Finance', icon: 'bar-chart' },
|
||||
{ path: '/hr', label: 'HR', icon: 'user' },
|
||||
{ path: '/legal', label: 'Legal', icon: 'file-text' },
|
||||
{ path: '/marketing', label: 'Marketing', icon: 'megaphone' },
|
||||
{ path: '/support', label: 'Support', icon: 'help-circle' },
|
||||
{ path: '/automation', label: 'Automation', icon: 'zap' },
|
||||
];
|
||||
|
||||
// Auth utilities
|
||||
function getToken() { return localStorage.getItem('boc_token'); }
|
||||
function getUser() {
|
||||
const u = localStorage.getItem('boc_user');
|
||||
return u ? JSON.parse(u) : null;
|
||||
}
|
||||
|
||||
function apiRequest(endpoint, options = {}) {
|
||||
const token = getToken();
|
||||
const url = endpoint.startsWith('http') ? endpoint : `${API_BASE}${endpoint}`;
|
||||
return fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
...options.headers
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Router
|
||||
async function navigate(path) {
|
||||
const app = document.getElementById('app');
|
||||
const loader = modules[path] || modules['/'];
|
||||
|
||||
try {
|
||||
const mod = await loader();
|
||||
app.innerHTML = '';
|
||||
await mod.render(app);
|
||||
updateActiveNav(path);
|
||||
} catch (err) {
|
||||
app.innerHTML = `<div class="alert alert-error">Failed to load module: ${err.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateActiveNav(path) {
|
||||
document.querySelectorAll('.sidebar-nav a').forEach(a => {
|
||||
a.classList.toggle('active', a.getAttribute('href') === '#' + path);
|
||||
});
|
||||
}
|
||||
|
||||
// Sidebar renderer
|
||||
function renderSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const user = getUser();
|
||||
|
||||
sidebar.innerHTML = `
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
${sidebarItems.map(item => `
|
||||
<a href="#${item.path}" data-path="${item.path}">
|
||||
<span>${item.label}</span>
|
||||
</a>
|
||||
`).join('')}
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span>${user?.email || 'guest'}</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
sidebar.querySelectorAll('a').forEach(a => {
|
||||
a.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const path = a.getAttribute('data-path');
|
||||
location.hash = path;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
location.href = '/login.html';
|
||||
}
|
||||
|
||||
// Auth check
|
||||
function requireAuth() {
|
||||
if (!getToken()) {
|
||||
location.href = '/login.html';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Init
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
if (!requireAuth()) return;
|
||||
renderSidebar();
|
||||
|
||||
const path = location.hash.slice(1) || '/';
|
||||
navigate(path);
|
||||
});
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
const path = location.hash.slice(1) || '/';
|
||||
navigate(path);
|
||||
});
|
||||
|
||||
// Export for modules
|
||||
window.apiRequest = apiRequest;
|
||||
window.getToken = getToken;
|
||||
window.getUser = getUser;
|
||||
@@ -0,0 +1,867 @@
|
||||
/* ============================================
|
||||
BOC — Business Operations Center
|
||||
Enterprise Design System
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Brand — Landvex Blue */
|
||||
--brand: #0066FF;
|
||||
--brand-dark: #0052CC;
|
||||
--brand-light: #4D94FF;
|
||||
--brand-glow: rgba(0, 102, 255, 0.15);
|
||||
|
||||
/* Neutral Scale */
|
||||
--neutral-0: #ffffff;
|
||||
--neutral-50: #f8f9fa;
|
||||
--neutral-100: #f1f3f5;
|
||||
--neutral-200: #e9ecef;
|
||||
--neutral-300: #dee2e6;
|
||||
--neutral-400: #ced4da;
|
||||
--neutral-500: #adb5bd;
|
||||
--neutral-600: #868e96;
|
||||
--neutral-700: #495057;
|
||||
--neutral-800: #343a40;
|
||||
--neutral-900: #212529;
|
||||
--neutral-1000: #0f172a;
|
||||
|
||||
/* Semantic */
|
||||
--success: #40c057;
|
||||
--warning: #fcc419;
|
||||
--danger: #fa5252;
|
||||
--info: #339af0;
|
||||
|
||||
/* Surfaces */
|
||||
--bg: #f5f5f7;
|
||||
--surface: #ffffff;
|
||||
--surface-hover: #f8f9fa;
|
||||
--sidebar-bg: #0f172a;
|
||||
|
||||
/* Text */
|
||||
--text: #1d1d1f;
|
||||
--text-secondary: #6B6B6B;
|
||||
--text-muted: #868e96;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Borders */
|
||||
--border: rgba(0,0,0,0.08);
|
||||
--border-strong: #e9ecef;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
|
||||
/* Radius */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 24px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 2px 8px rgba(0,0,0,0.06);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
|
||||
|
||||
/* Typography */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LOGIN PAGE
|
||||
============================================ */
|
||||
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background: var(--surface);
|
||||
padding: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--brand);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-logo svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.login-box h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.login-box .subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand);
|
||||
box-shadow: 0 0 0 3px var(--brand-glow);
|
||||
}
|
||||
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: var(--brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-dark);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-footer a {
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
background: #fff5f5;
|
||||
color: var(--danger);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(250, 82, 82, 0.2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error-msg.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
APP LAYOUT
|
||||
============================================ */
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--text-inverse);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
padding: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sidebar-logo svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-nav a:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.sidebar-nav a.active {
|
||||
background: var(--brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-nav svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sidebar-nav a.active svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.sidebar-footer button {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
padding: 8px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
color: rgba(255,255,255,0.6);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-footer button:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main {
|
||||
flex: 1;
|
||||
margin-left: 240px;
|
||||
padding: 32px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.module-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.module-header h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.module-header .subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
KPI CARDS
|
||||
============================================ */
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--brand-glow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kpi-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kpi-trend {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.kpi-trend.up {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.kpi-trend.down {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PANELS
|
||||
============================================ */
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toolbar h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DASHBOARD GRID
|
||||
============================================ */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
QUICK ACTIONS
|
||||
============================================ */
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--brand);
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACTIVITY FEED
|
||||
============================================ */
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list-item-main {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.list-item-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: rgba(64, 192, 87, 0.1);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: rgba(252, 196, 25, 0.1);
|
||||
color: #d4a017;
|
||||
}
|
||||
|
||||
.badge.danger {
|
||||
background: rgba(250, 82, 82, 0.1);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.badge.info {
|
||||
background: rgba(51, 154, 240, 0.1);
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
AUTOMATION STATUS
|
||||
============================================ */
|
||||
|
||||
.automation-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.automation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.automation-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.automation-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.automation-indicator.active {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.automation-indicator.warning {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.automation-indicator.danger {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.automation-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.automation-schedule {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ALERTS
|
||||
============================================ */
|
||||
|
||||
.alert {
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.alert-critical {
|
||||
background: rgba(250, 82, 82, 0.06);
|
||||
border: 1px solid rgba(250, 82, 82, 0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: rgba(252, 196, 25, 0.06);
|
||||
border: 1px solid rgba(252, 196, 25, 0.15);
|
||||
color: #d4a017;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LIVE INDICATOR
|
||||
============================================ */
|
||||
|
||||
#live-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
#live-indicator::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODAL
|
||||
============================================ */
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 300;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 24px 0;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
EMPTY STATE
|
||||
============================================ */
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LOADING
|
||||
============================================ */
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--border-strong);
|
||||
border-top-color: var(--brand);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.main {
|
||||
margin-left: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.quick-actions {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TABLES
|
||||
============================================ */
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--neutral-50);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTONS
|
||||
============================================ */
|
||||
|
||||
.btn-link {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCROLLBAR
|
||||
============================================ */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--neutral-300);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--neutral-400);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// BOC — Business Operations Center
|
||||
// Shared JavaScript utilities
|
||||
|
||||
const API_BASE = '/api/v1';
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
function getUser() {
|
||||
const user = localStorage.getItem('boc_user');
|
||||
return user ? JSON.parse(user) : null;
|
||||
}
|
||||
|
||||
function apiRequest(endpoint, options = {}) {
|
||||
const token = getToken();
|
||||
const url = endpoint.startsWith('http') ? endpoint : `${API_BASE}${endpoint}`;
|
||||
|
||||
return fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
...options.headers
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatCurrency(value, currency = 'USD') {
|
||||
if (value === null || value === undefined) return '—';
|
||||
return new Intl.NumberFormat('sv-SE', {
|
||||
style: 'currency',
|
||||
currency,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
if (!date) return '-';
|
||||
return new Date(date).toLocaleDateString('sv-SE');
|
||||
}
|
||||
|
||||
function formatDateTime(date) {
|
||||
if (!date) return '-';
|
||||
return new Date(date).toLocaleString('sv-SE');
|
||||
}
|
||||
|
||||
function timeAgo(timestamp) {
|
||||
const diff = Date.now() - new Date(timestamp).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'nyss';
|
||||
if (mins < 60) return `${mins}m sedan`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h sedan`;
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days < 30) return `${days}d sedan`;
|
||||
return formatDate(timestamp);
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `alert alert-${type}`;
|
||||
toast.style.cssText = 'position:fixed;top:24px;right:24px;z-index:1000;max-width:400px;animation:slideIn 0.3s ease;';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => toast.remove(), 5000);
|
||||
}
|
||||
|
||||
function confirmDelete(message) {
|
||||
return confirm(message || 'Ar du saker pa att du vill ta bort detta?');
|
||||
}
|
||||
|
||||
// Check authentication on page load
|
||||
function requireAuth() {
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Update user email in sidebar
|
||||
function updateUserInfo() {
|
||||
const user = getUser();
|
||||
const el = document.getElementById('user-email');
|
||||
if (el && user) {
|
||||
el.textContent = user.email || 'erik@landvex.com';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateUserInfo();
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
// Automation module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Automation</h1>
|
||||
<p class="subtitle">Workflows och schemalagda jobb</p>
|
||||
</header>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
// CRM module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>CRM</h1>
|
||||
<p class="subtitle">Kunder och leads</p>
|
||||
</header>
|
||||
<div class="toolbar">
|
||||
<button class="btn-primary" id="btn-new-customer">+ Ny kund</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="customers-table">
|
||||
<thead>
|
||||
<tr><th>Namn</th><th>Företag</th><th>Status</th><th>Email</th></tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
const res = await apiRequest('/crm/customers');
|
||||
const data = await res.json();
|
||||
const tbody = container.querySelector('#customers-table tbody');
|
||||
|
||||
if (data.customers?.length) {
|
||||
tbody.innerHTML = data.customers.map(c => `
|
||||
<tr>
|
||||
<td>${c.name}</td>
|
||||
<td>${c.company || '-'}</td>
|
||||
<td><span class="badge badge-${c.status}">${c.status}</span></td>
|
||||
<td>${c.email || '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="4">Inga kunder hittades</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
container.innerHTML += `<div class="alert alert-error">Kunde inte ladda kunder: ${err.message}</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// Dashboard module — rendered dynamically into #app
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Dashboard</h1>
|
||||
<p class="subtitle">Överblick över hela verksamheten</p>
|
||||
</header>
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value" id="kpi-revenue">—</div>
|
||||
<div class="kpi-label">Månadsintäkt</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value" id="kpi-deals">—</div>
|
||||
<div class="kpi-label">Aktiva deals</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value" id="kpi-customers">—</div>
|
||||
<div class="kpi-label">Kunder</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value" id="kpi-tickets">—</div>
|
||||
<div class="kpi-label">Öppna ärenden</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Snabbåtgärder</h2>
|
||||
<div class="quick-actions">
|
||||
<button onclick="location.hash='/crm'">+ Ny kund</button>
|
||||
<button onclick="location.hash='/sales'">+ Ny offert</button>
|
||||
<button onclick="location.hash='/finance'">+ Ny faktura</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Load real data
|
||||
try {
|
||||
const [deals, customers, tickets] = await Promise.all([
|
||||
apiRequest('/sales/deals').then(r => r.ok ? r.json() : {deals: []}),
|
||||
apiRequest('/crm/customers').then(r => r.ok ? r.json() : {customers: []}),
|
||||
apiRequest('/support/tickets').then(r => r.ok ? r.json() : {tickets: []}),
|
||||
]);
|
||||
|
||||
document.getElementById('kpi-deals').textContent = deals.deals?.length || 0;
|
||||
document.getElementById('kpi-customers').textContent = customers.customers?.length || 0;
|
||||
document.getElementById('kpi-tickets').textContent = tickets.tickets?.length || 0;
|
||||
} catch (err) {
|
||||
console.error('Dashboard load error:', err);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// Finance module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Finance</h1>
|
||||
<p class="subtitle">Fakturor och ekonomi</p>
|
||||
</header>
|
||||
<div class="toolbar">
|
||||
<button class="btn-primary">+ Ny faktura</button>
|
||||
</div>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// HR module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>HR</h1>
|
||||
<p class="subtitle">Anställda och tidrapporter</p>
|
||||
</header>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Legal module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Legal</h1>
|
||||
<p class="subtitle">Kontrakt och påminnelser</p>
|
||||
</header>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Marketing module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Marketing</h1>
|
||||
<p class="subtitle">Kampanjer och innehåll</p>
|
||||
</header>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// Sales module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Sales</h1>
|
||||
<p class="subtitle">Deals och offert</p>
|
||||
</header>
|
||||
<div class="toolbar">
|
||||
<button class="btn-primary">+ Ny deal</button>
|
||||
<button class="btn-secondary">+ Ny offert</button>
|
||||
</div>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Support module
|
||||
export async function render(container) {
|
||||
container.innerHTML = `
|
||||
<header class="module-header">
|
||||
<h1>Support</h1>
|
||||
<p class="subtitle">Ärenden och kundtjänst</p>
|
||||
</header>
|
||||
<p>Modulen laddas...</p>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Automation — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Automation</h1>
|
||||
<p class="subtitle">Automatiserade arbetsfloden</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Jobb</h3>
|
||||
<button class="btn-primary" onclick="createJob()" style="width:auto; padding: 8px 16px;">+ Nytt jobb</button>
|
||||
</div>
|
||||
<table class="data-table" id="jobs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Namn</th>
|
||||
<th>Typ</th>
|
||||
<th>Schema</th>
|
||||
<th>Status</th>
|
||||
<th>Senast kor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="jobs-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadJobs() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/automation/jobs', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('jobs-body');
|
||||
if (data.jobs && data.jobs.length > 0) {
|
||||
tbody.innerHTML = data.jobs.map(j => `
|
||||
<tr>
|
||||
<td>${j.name}</td>
|
||||
<td>${j.job_type || '-'}</td>
|
||||
<td>${j.schedule || '-'}</td>
|
||||
<td><span class="badge ${j.status === 'active' ? 'success' : 'warning'}">${j.status}</span></td>
|
||||
<td>${j.last_run ? new Date(j.last_run).toLocaleDateString('sv-SE') : 'Aldrig'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga jobb an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('jobs-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createJob() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadJobs();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC CRM — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>CRM</h1>
|
||||
<p class="subtitle">Kunder och kontakter</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Kunder</h3>
|
||||
<button class="btn-primary" onclick="createCustomer()" style="width:auto; padding: 8px 16px;">+ Ny kund</button>
|
||||
</div>
|
||||
<table class="data-table" id="customers-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Namn</th>
|
||||
<th>E-post</th>
|
||||
<th>Telefon</th>
|
||||
<th>Status</th>
|
||||
<th>Skapad</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="customers-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadCustomers() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/crm/customers', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('customers-body');
|
||||
if (data.customers && data.customers.length > 0) {
|
||||
tbody.innerHTML = data.customers.map(c => `
|
||||
<tr>
|
||||
<td>${c.name}</td>
|
||||
<td>${c.email}</td>
|
||||
<td>${c.phone || '-'}</td>
|
||||
<td><span class="badge ${c.status === 'active' ? 'success' : 'warning'}">${c.status}</span></td>
|
||||
<td>${new Date(c.created_at).toLocaleDateString('sv-SE')}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga kunder an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('customers-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createCustomer() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadCustomers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,557 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Dashboard — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<!-- Header -->
|
||||
<header class="module-header">
|
||||
<h1>Dashboard</h1>
|
||||
<p class="subtitle">Overblick over hela verksamheten</p>
|
||||
</header>
|
||||
|
||||
<!-- Critical Alerts -->
|
||||
<div id="alerts-container" style="display:none; margin-bottom: var(--space-lg);">
|
||||
<div class="alert alert-critical">
|
||||
<strong>Kritiskt:</strong> Momsdeklaration 442,000 kr — deadline 2026-07-26 (14 dagar kvar)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Grid -->
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card" onclick="navigateTo('sales')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-mrr">—</div>
|
||||
<div class="kpi-label">MRR</div>
|
||||
<div class="kpi-trend up" id="kpi-mrr-trend">+5%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card" onclick="navigateTo('sales')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-arr">—</div>
|
||||
<div class="kpi-label">ARR</div>
|
||||
<div class="kpi-trend up" id="kpi-arr-trend">+12%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card" onclick="navigateTo('crm')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-customers">—</div>
|
||||
<div class="kpi-label">Kunder</div>
|
||||
<div class="kpi-trend up" id="kpi-customers-trend">+3 nya</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card" onclick="navigateTo('support')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-tickets">—</div>
|
||||
<div class="kpi-label">Oppna arenden</div>
|
||||
<div class="kpi-trend down" id="kpi-tickets-trend">-2 idag</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card" onclick="navigateTo('finance')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-cash">—</div>
|
||||
<div class="kpi-label">Kassa</div>
|
||||
<div class="kpi-trend" id="kpi-cash-trend">4 manader runway</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card" onclick="navigateTo('sales')">
|
||||
<div class="kpi-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16.2 7.8l-2 6.3l-6.4 2.1l2-6.3z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-value" id="kpi-pipeline">—</div>
|
||||
<div class="kpi-label">Pipeline</div>
|
||||
<div class="kpi-trend up" id="kpi-pipeline-trend">+15%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two Column Layout -->
|
||||
<div class="dashboard-grid">
|
||||
<!-- Left: Charts -->
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Intaktstrend</h3>
|
||||
<select id="revenue-period" onchange="updateRevenueChart()">
|
||||
<option value="6m">6 manader</option>
|
||||
<option value="1y">1 ar</option>
|
||||
<option value="ytd">Ar till datum</option>
|
||||
</select>
|
||||
</div>
|
||||
<canvas id="revenue-chart" height="200"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Pipeline</h3>
|
||||
<a href="sales.html" class="btn-link">Se alla deals</a>
|
||||
</div>
|
||||
<canvas id="pipeline-chart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Activity & Quick Actions -->
|
||||
<div>
|
||||
<!-- Quick Actions -->
|
||||
<div class="panel">
|
||||
<h3>Snabbatgarder</h3>
|
||||
<div class="quick-actions">
|
||||
<button class="btn-action" onclick="createCustomer()">+ Kund</button>
|
||||
<button class="btn-action" onclick="createDeal()">+ Deal</button>
|
||||
<button class="btn-action" onclick="createInvoice()">+ Faktura</button>
|
||||
<button class="btn-action" onclick="createTicket()">+ Arende</button>
|
||||
<button class="btn-action" onclick="createExpense()">+ Utgift</button>
|
||||
<button class="btn-action" onclick="createContract()">+ Kontrakt</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Senaste aktivitet</h3>
|
||||
<span class="badge active" id="live-indicator">Live</span>
|
||||
</div>
|
||||
<div id="activity-feed">
|
||||
<div class="loading">Laddar aktivitet...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Automation Status -->
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Automation</h3>
|
||||
<a href="automation.html" class="btn-link">Hantera</a>
|
||||
</div>
|
||||
<div class="automation-grid" id="automation-status">
|
||||
<div class="automation-item">
|
||||
<span class="automation-indicator active"></span>
|
||||
<span class="automation-name">Kontraktsfornyelser</span>
|
||||
<span class="automation-schedule">Dagligen 09:00</span>
|
||||
</div>
|
||||
<div class="automation-item">
|
||||
<span class="automation-indicator active"></span>
|
||||
<span class="automation-name">Fakturapaminnelser</span>
|
||||
<span class="automation-schedule">Mandagar</span>
|
||||
</div>
|
||||
<div class="automation-item">
|
||||
<span class="automation-indicator warning"></span>
|
||||
<span class="automation-name">Momsrapport</span>
|
||||
<span class="automation-schedule">Manuell — deadline 2026-07-26</span>
|
||||
</div>
|
||||
<div class="automation-item">
|
||||
<span class="automation-indicator active"></span>
|
||||
<span class="automation-name">Backup</span>
|
||||
<span class="automation-schedule">Dagligen 02:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="modal" class="modal" style="display:none;" onclick="if(event.target===this)hideModal()">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="modal-title">Skapa</h3>
|
||||
<button class="modal-close" onclick="hideModal()">×</button>
|
||||
</div>
|
||||
<div id="modal-body" class="modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
// Navigation
|
||||
function navigateTo(module) {
|
||||
window.location.href = module + '.html';
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
// Quick create functions
|
||||
function createCustomer() {
|
||||
showModal('Ny kund', `
|
||||
<div class="form-group">
|
||||
<label>Foretag / Namn</label>
|
||||
<input type="text" id="cust-name" placeholder="Acme AB" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>E-post</label>
|
||||
<input type="email" id="cust-email" placeholder="kontakt@acme.se">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Telefon</label>
|
||||
<input type="tel" id="cust-phone" placeholder="+46 70 123 45 67">
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitCustomer()" style="width:100%">Skapa kund</button>
|
||||
`);
|
||||
}
|
||||
|
||||
function createDeal() {
|
||||
showModal('Ny deal', `
|
||||
<div class="form-group">
|
||||
<label>Deal-namn</label>
|
||||
<input type="text" id="deal-name" placeholder="Q3 Enterprise" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Varde (USD)</label>
|
||||
<input type="number" id="deal-value" placeholder="50000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Steg</label>
|
||||
<select id="deal-stage">
|
||||
<option value="prospect">Prospect</option>
|
||||
<option value="qualified">Qualified</option>
|
||||
<option value="proposal">Proposal</option>
|
||||
<option value="negotiation">Negotiation</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitDeal()" style="width:100%">Skapa deal</button>
|
||||
`);
|
||||
}
|
||||
|
||||
function createInvoice() {
|
||||
showModal('Ny faktura', `
|
||||
<div class="form-group">
|
||||
<label>Kund</label>
|
||||
<select id="inv-customer"><option>Laddar...</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Belopp (USD)</label>
|
||||
<input type="number" id="inv-amount" placeholder="10000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Forfallodatum</label>
|
||||
<input type="date" id="inv-due">
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitInvoice()" style="width:100%">Skapa faktura</button>
|
||||
`);
|
||||
}
|
||||
|
||||
function createTicket() {
|
||||
showModal('Nytt arende', `
|
||||
<div class="form-group">
|
||||
<label>Amne</label>
|
||||
<input type="text" id="ticket-subject" placeholder="Problem med inloggning" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Beskrivning</label>
|
||||
<textarea id="ticket-desc" rows="3" placeholder="Beskriv problemet..."></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Prioritet</label>
|
||||
<select id="ticket-priority">
|
||||
<option value="low">Lag</option>
|
||||
<option value="medium" selected>Medium</option>
|
||||
<option value="high">Hog</option>
|
||||
<option value="critical">Kritisk</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitTicket()" style="width:100%">Skapa arende</button>
|
||||
`);
|
||||
}
|
||||
|
||||
function createExpense() {
|
||||
showModal('Ny utgift', `
|
||||
<div class="form-group">
|
||||
<label>Kategori</label>
|
||||
<select id="exp-cat">
|
||||
<option>Boende</option>
|
||||
<option>Mat</option>
|
||||
<option>Resa</option>
|
||||
<option>Transport</option>
|
||||
<option>Tech</option>
|
||||
<option>Juridik</option>
|
||||
<option>Kommunikation</option>
|
||||
<option>Ovrigt</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Belopp</label>
|
||||
<input type="number" id="exp-amount" placeholder="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Beskrivning</label>
|
||||
<input type="text" id="exp-desc" placeholder="Vad galler utgiften?">
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitExpense()" style="width:100%">Registrera utgift</button>
|
||||
`);
|
||||
}
|
||||
|
||||
function createContract() {
|
||||
showModal('Nytt kontrakt', `
|
||||
<div class="form-group">
|
||||
<label>Titel</label>
|
||||
<input type="text" id="contract-title" placeholder="Tjansteavtal 2026" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Motpart</label>
|
||||
<input type="text" id="contract-party" placeholder="Foretagsnamn">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Typ</label>
|
||||
<select id="contract-type">
|
||||
<option value="service">Tjansteavtal</option>
|
||||
<option value="employment">Anstallning</option>
|
||||
<option value="nda">NDA</option>
|
||||
<option value="partnership">Partnerskap</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="submitContract()" style="width:100%">Skapa kontrakt</button>
|
||||
`);
|
||||
}
|
||||
|
||||
// Modal helpers
|
||||
function showModal(title, html) {
|
||||
document.getElementById('modal-title').textContent = title;
|
||||
document.getElementById('modal-body').innerHTML = html;
|
||||
document.getElementById('modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
document.getElementById('modal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Submit functions
|
||||
async function submitCustomer() { hideModal(); }
|
||||
async function submitDeal() { hideModal(); }
|
||||
async function submitInvoice() { hideModal(); }
|
||||
async function submitTicket() { hideModal(); }
|
||||
async function submitExpense() { hideModal(); }
|
||||
async function submitContract() { hideModal(); }
|
||||
|
||||
// Get auth token
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
// Check auth on load
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
// Load dashboard data
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const token = getToken();
|
||||
const res = await fetch('/api/v1/analytics/dashboard', {
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.kpis) {
|
||||
document.getElementById('kpi-mrr').textContent = formatCurrency(data.kpis.mrr?.value);
|
||||
document.getElementById('kpi-arr').textContent = formatCurrency(data.kpis.arr?.value);
|
||||
document.getElementById('kpi-customers').textContent = data.kpis.customers?.active || 0;
|
||||
document.getElementById('kpi-tickets').textContent = data.kpis.tickets?.open || 0;
|
||||
document.getElementById('kpi-cash').textContent = formatCurrency(data.kpis.cash?.on_hand);
|
||||
document.getElementById('kpi-pipeline').textContent = formatCurrency(data.kpis.pipeline?.total_value);
|
||||
}
|
||||
|
||||
renderCharts(data.charts);
|
||||
renderActivity(data.activity || []);
|
||||
} catch (err) {
|
||||
console.error('Failed to load dashboard:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function formatCurrency(value) {
|
||||
if (!value) return '—';
|
||||
return new Intl.NumberFormat('sv-SE', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value);
|
||||
}
|
||||
|
||||
function renderCharts(charts) {
|
||||
if (!charts) return;
|
||||
|
||||
const revCtx = document.getElementById('revenue-chart');
|
||||
if (revCtx && charts.revenue_trend) {
|
||||
new Chart(revCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: charts.revenue_trend.map(d => d.month),
|
||||
datasets: [{
|
||||
label: 'Intakt',
|
||||
data: charts.revenue_trend.map(d => d.revenue),
|
||||
borderColor: '#0066FF',
|
||||
backgroundColor: 'rgba(0, 102, 255, 0.08)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, grid: { color: '#e9ecef' }, ticks: { callback: v => '$' + (v/1000) + 'k' } },
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const pipeCtx = document.getElementById('pipeline-chart');
|
||||
if (pipeCtx && charts.pipeline_by_stage) {
|
||||
new Chart(pipeCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: charts.pipeline_by_stage.map(d => d.stage),
|
||||
datasets: [{
|
||||
data: charts.pipeline_by_stage.map(d => d.value),
|
||||
backgroundColor: ['#0066FF', '#4D94FF', '#80B3FF', '#B3D1FF'],
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '65%',
|
||||
plugins: {
|
||||
legend: { position: 'right', labels: { usePointStyle: true, padding: 16 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderActivity(activities) {
|
||||
const feed = document.getElementById('activity-feed');
|
||||
if (activities.length === 0) {
|
||||
feed.innerHTML = '<div class="empty-state"><p>Ingen aktivitet an</p></div>';
|
||||
return;
|
||||
}
|
||||
feed.innerHTML = activities.slice(0, 8).map(a => `
|
||||
<div class="list-item">
|
||||
<div>
|
||||
<div class="list-item-main">${a.description}</div>
|
||||
<div class="list-item-meta">${a.user} · ${timeAgo(a.timestamp)}</div>
|
||||
</div>
|
||||
<span class="badge ${a.status}">${a.type}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function timeAgo(timestamp) {
|
||||
const diff = Date.now() - new Date(timestamp).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'nyss';
|
||||
if (mins < 60) return `${mins}m sedan`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h sedan`;
|
||||
return `${Math.floor(hours / 24)}d sedan`;
|
||||
}
|
||||
|
||||
// WebSocket
|
||||
let ws;
|
||||
function connectWebSocket() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const token = getToken();
|
||||
ws = new WebSocket(`${protocol}//${window.location.host}/ws?tenant_id=default&token=***
|
||||
|
||||
ws.onopen = () => {
|
||||
document.getElementById('live-indicator').style.display = 'inline-flex';
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'deal_updated' || data.type === 'ticket_updated') {
|
||||
loadDashboard();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
document.getElementById('live-indicator').style.display = 'none';
|
||||
setTimeout(connectWebSocket, 5000);
|
||||
};
|
||||
}
|
||||
|
||||
// Init
|
||||
loadDashboard();
|
||||
connectWebSocket();
|
||||
setInterval(loadDashboard, 60000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Finance — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Finance</h1>
|
||||
<p class="subtitle">Fakturor, utgifter och bokforing</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Fakturor</h3>
|
||||
<button class="btn-primary" onclick="createInvoice()" style="width:auto; padding: 8px 16px;">+ Ny faktura</button>
|
||||
</div>
|
||||
<table class="data-table" id="invoices-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nummer</th>
|
||||
<th>Kund</th>
|
||||
<th>Belopp</th>
|
||||
<th>Status</th>
|
||||
<th>Forfallo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="invoices-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadInvoices() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/finance/invoices', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('invoices-body');
|
||||
if (data.invoices && data.invoices.length > 0) {
|
||||
tbody.innerHTML = data.invoices.map(i => `
|
||||
<tr>
|
||||
<td>${i.invoice_number}</td>
|
||||
<td>${i.customer_name || '-'}</td>
|
||||
<td>$${i.total_amount?.toLocaleString() || 0}</td>
|
||||
<td><span class="badge ${i.status === 'paid' ? 'success' : i.status === 'overdue' ? 'danger' : 'warning'}">${i.status}</span></td>
|
||||
<td>${new Date(i.due_date).toLocaleDateString('sv-SE')}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga fakturor an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('invoices-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createInvoice() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadInvoices();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC HR — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>HR</h1>
|
||||
<p class="subtitle">Personal och organisation</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Personal</h3>
|
||||
<button class="btn-primary" onclick="createEmployee()" style="width:auto; padding: 8px 16px;">+ Ny anstalld</button>
|
||||
</div>
|
||||
<table class="data-table" id="employees-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Namn</th>
|
||||
<th>E-post</th>
|
||||
<th>Avdelning</th>
|
||||
<th>Roll</th>
|
||||
<th>Startdatum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="employees-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadEmployees() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/hr/employees', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('employees-body');
|
||||
if (data.employees && data.employees.length > 0) {
|
||||
tbody.innerHTML = data.employees.map(e => `
|
||||
<tr>
|
||||
<td>${e.first_name} ${e.last_name}</td>
|
||||
<td>${e.email}</td>
|
||||
<td>${e.department || '-'}</td>
|
||||
<td>${e.role || '-'}</td>
|
||||
<td>${e.start_date ? new Date(e.start_date).toLocaleDateString('sv-SE') : '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga anstallda an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('employees-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createEmployee() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadEmployees();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar" id="sidebar"></aside>
|
||||
<main class="main" id="app"></main>
|
||||
</div>
|
||||
<script type="module" src="assets/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Legal — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Legal</h1>
|
||||
<p class="subtitle">Kontrakt och juridiska dokument</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Kontrakt</h3>
|
||||
<button class="btn-primary" onclick="createContract()" style="width:auto; padding: 8px 16px;">+ Nytt kontrakt</button>
|
||||
</div>
|
||||
<table class="data-table" id="contracts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Titel</th>
|
||||
<th>Motpart</th>
|
||||
<th>Typ</th>
|
||||
<th>Status</th>
|
||||
<th>Signeras</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="contracts-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadContracts() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/legal/contracts', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('contracts-body');
|
||||
if (data.contracts && data.contracts.length > 0) {
|
||||
tbody.innerHTML = data.contracts.map(c => `
|
||||
<tr>
|
||||
<td>${c.title}</td>
|
||||
<td>${c.counterparty || '-'}</td>
|
||||
<td>${c.contract_type || '-'}</td>
|
||||
<td><span class="badge ${c.status === 'active' ? 'success' : c.status === 'expired' ? 'danger' : 'warning'}">${c.status}</span></td>
|
||||
<td>${c.signature_date ? new Date(c.signature_date).toLocaleDateString('sv-SE') : '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga kontrakt an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('contracts-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createContract() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadContracts();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FDF8F3 0%, #F5EDE4 100%);
|
||||
}
|
||||
.login-box {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #C96A3A;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
.login-box h1 {
|
||||
color: #1A1A2E;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.login-box p {
|
||||
color: #6B7280;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 2px solid #E5E7EB;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #C96A3A;
|
||||
box-shadow: 0 0 0 3px rgba(201,106,58,0.1);
|
||||
}
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: #C96A3A;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.btn-login:hover {
|
||||
background: #B85A2E;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(201,106,58,0.3);
|
||||
}
|
||||
.login-footer {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
font-size: 0.75rem;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
.error-msg {
|
||||
background: #FEE2E2;
|
||||
color: #DC2626;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
display: none;
|
||||
}
|
||||
.error-msg.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<div class="login-logo">🏢</div>
|
||||
<h1>Business Operations Center</h1>
|
||||
<p>Logga in för att hantera ditt företag</p>
|
||||
|
||||
<div class="error-msg" id="error"></div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="email">E-post</label>
|
||||
<input type="email" id="email" name="email" placeholder="namn@foretag.se" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Lösenord</label>
|
||||
<input type="password" id="password" name="password" placeholder="••••••••" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-login">Logga in</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
Landvex Inc · AAMOS Platform<br>
|
||||
<a href="https://aamos.systems" style="color:#C96A3A;text-decoration:none;">aamos.systems</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const error = document.getElementById('error');
|
||||
error.classList.remove('show');
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/v1/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.token) {
|
||||
localStorage.setItem('boc_token', data.token);
|
||||
localStorage.setItem('boc_user', JSON.stringify(data.user));
|
||||
window.location.href = '/dashboard.html';
|
||||
} else {
|
||||
error.textContent = data.error || 'Inloggning misslyckades';
|
||||
error.classList.add('show');
|
||||
}
|
||||
} catch (err) {
|
||||
error.textContent = 'Anslutningsfel. Försök igen.';
|
||||
error.classList.add('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Marketing — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Marketing</h1>
|
||||
<p class="subtitle">Kampanjer och leads</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Kampanjer</h3>
|
||||
<button class="btn-primary" onclick="createCampaign()" style="width:auto; padding: 8px 16px;">+ Ny kampanj</button>
|
||||
</div>
|
||||
<table class="data-table" id="campaigns-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Namn</th>
|
||||
<th>Kanal</th>
|
||||
<th>Budget</th>
|
||||
<th>Status</th>
|
||||
<th>Start</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="campaigns-body">
|
||||
<tr><td colspan="5" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadCampaigns() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/marketing/campaigns', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('campaigns-body');
|
||||
if (data.campaigns && data.campaigns.length > 0) {
|
||||
tbody.innerHTML = data.campaigns.map(c => `
|
||||
<tr>
|
||||
<td>${c.name}</td>
|
||||
<td>${c.channel || '-'}</td>
|
||||
<td>$${c.budget?.toLocaleString() || 0}</td>
|
||||
<td><span class="badge ${c.status === 'active' ? 'success' : 'warning'}">${c.status}</span></td>
|
||||
<td>${c.start_date ? new Date(c.start_date).toLocaleDateString('sv-SE') : '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">Inga kampanjer an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('campaigns-body').innerHTML = '<tr><td colspan="5" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createCampaign() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadCampaigns();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Sales — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Sales</h1>
|
||||
<p class="subtitle">Deals, offers och pipeline</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Deals</h3>
|
||||
<button class="btn-primary" onclick="createDeal()" style="width:auto; padding: 8px 16px;">+ Ny deal</button>
|
||||
</div>
|
||||
<table class="data-table" id="deals-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Namn</th>
|
||||
<th>Kund</th>
|
||||
<th>Varde</th>
|
||||
<th>Steg</th>
|
||||
<th>Sannolikhet</th>
|
||||
<th>Stanger</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="deals-body">
|
||||
<tr><td colspan="6" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadDeals() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/sales/deals', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('deals-body');
|
||||
if (data.deals && data.deals.length > 0) {
|
||||
tbody.innerHTML = data.deals.map(d => `
|
||||
<tr>
|
||||
<td>${d.name}</td>
|
||||
<td>${d.customer_name || '-'}</td>
|
||||
<td>${d.value ? '$' + d.value.toLocaleString() : '-'}</td>
|
||||
<td><span class="badge info">${d.stage}</span></td>
|
||||
<td>${d.probability || 0}%</td>
|
||||
<td>${d.expected_close ? new Date(d.expected_close).toLocaleDateString('sv-SE') : '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">Inga deals an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('deals-body').innerHTML = '<tr><td colspan="6" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createDeal() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadDeals();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BOC Support — Business Operations Center</title>
|
||||
<link rel="stylesheet" href="assets/boc.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
<span>BOC</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="crm.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>CRM</span>
|
||||
</a>
|
||||
<a href="sales.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
<span>Sales</span>
|
||||
</a>
|
||||
<a href="finance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
<span>Finance</span>
|
||||
</a>
|
||||
<a href="hr.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a href="legal.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
<a href="marketing.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5.08V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v3.08"/><path d="M7 9h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z"/><path d="M7 9V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>
|
||||
<span>Marketing</span>
|
||||
</a>
|
||||
<a href="support.html" class="active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a href="automation.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<span>Automation</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span id="user-email">erik@landvex.com</span>
|
||||
<button onclick="logout()">Logga ut</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="module-header">
|
||||
<h1>Support</h1>
|
||||
<p class="subtitle">Arenden och kundtjanst</p>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="toolbar">
|
||||
<h3>Arenden</h3>
|
||||
<button class="btn-primary" onclick="createTicket()" style="width:auto; padding: 8px 16px;">+ Nytt arende</button>
|
||||
</div>
|
||||
<table class="data-table" id="tickets-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Amne</th>
|
||||
<th>Kund</th>
|
||||
<th>Prioritet</th>
|
||||
<th>Status</th>
|
||||
<th>Skapad</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tickets-body">
|
||||
<tr><td colspan="6" class="loading">Laddar...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/boc.js"></script>
|
||||
<script>
|
||||
function logout() {
|
||||
localStorage.removeItem('boc_token');
|
||||
localStorage.removeItem('boc_user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem('boc_token');
|
||||
}
|
||||
|
||||
if (!getToken()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadTickets() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/support/tickets', {
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
});
|
||||
const data = await res.json();
|
||||
const tbody = document.getElementById('tickets-body');
|
||||
if (data.tickets && data.tickets.length > 0) {
|
||||
tbody.innerHTML = data.tickets.map(t => `
|
||||
<tr>
|
||||
<td>#${t.id}</td>
|
||||
<td>${t.subject}</td>
|
||||
<td>${t.customer_name || '-'}</td>
|
||||
<td><span class="badge ${t.priority === 'critical' ? 'danger' : t.priority === 'high' ? 'warning' : 'info'}">${t.priority}</span></td>
|
||||
<td><span class="badge ${t.status === 'open' ? 'warning' : t.status === 'resolved' ? 'success' : 'info'}">${t.status}</span></td>
|
||||
<td>${new Date(t.created_at).toLocaleDateString('sv-SE')}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">Inga arenden an</td></tr>';
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('tickets-body').innerHTML = '<tr><td colspan="6" class="error">Fel vid laddning</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function createTicket() {
|
||||
window.location.href = '/dashboard.html';
|
||||
}
|
||||
|
||||
loadTickets();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user