77465ee9eb
- All 9 module pages: Dashboard, CRM, Sales, Finance, HR, Legal, Marketing, Support, Automation - Shared boc.js with API utilities - Landvex enterprise design: dark sidebar, light content - SVG icons, no emojis - Tables with real data loading - Consistent navigation and auth
142 lines
6.2 KiB
HTML
142 lines
6.2 KiB
HTML
<!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': '***' + 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>
|