Menu
Public repository / d7881502b38897a157bd49340f35ea33e81cbaa7
AkurAI-CRM / site/frontend/opportunities.html
Latest change d7881502b38897a157bd49340f35ea33e81cbaa7 - feat: initial AkurAI-CRM implementation by Ólafur B. J.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opportunities — AkurAI-CRM</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon">A</div>
<div class="sidebar-brand-text">AkurAI<span>-CRM</span></div>
</div>
<nav class="sidebar-nav">
<div class="sidebar-section">Main</div>
<a href="/dashboard.html" class="nav-link">
<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>
Dashboard
</a>
<a href="/people.html" class="nav-link">
<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>
People
</a>
<a href="/companies.html" class="nav-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
Companies
</a>
<a href="/opportunities.html" class="nav-link 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>
Opportunities
</a>
<a href="/tasks.html" class="nav-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
Tasks
</a>
<a href="/notes.html" class="nav-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
Notes
</a>
<div class="sidebar-section" style="margin-top:var(--space-4);">Workspace</div>
<a href="/settings.html" class="nav-link">
<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="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
Settings
</a>
</nav>
<div class="sidebar-footer">
<div class="nav-link" style="cursor:default;opacity:0.6;">
<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 style="font-size:var(--text-xs);">olafur@akurai.is</span>
</div>
</div>
</aside>
<div class="main-area">
<header class="topbar">
<div class="topbar-title">Opportunities</div>
<div class="topbar-spacer"></div>
<div class="topbar-actions">
<div class="btn-group" style="margin-right:var(--space-3);">
<button class="btn btn-sm btn-secondary active" id="view-kanban">
<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="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
Board
</button>
<button class="btn btn-sm btn-secondary" id="view-table">
<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="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
Table
</button>
</div>
<button class="btn btn-primary btn-sm" onclick="alert('Add Opportunity modal')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Add Deal
</button>
</div>
</header>
<div class="main-content">
<!-- Kanban Board -->
<div id="kanban-view">
<div class="kanban-board">
<!-- New -->
<div class="kanban-column new">
<div class="kanban-header" style="border-left:3px solid #94a3b8;">
<span>New <span class="count">(2)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Cloud Migration Project</div>
<div class="card-subtitle">Vortex Solutions · Sigurður M.</div>
<div class="card-footer">
<div class="card-amount">$28,000</div>
<span class="badge badge-slate">New</span>
</div>
</a>
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Annual Support Contract</div>
<div class="card-subtitle">IceCloud Systems · Helga K.</div>
<div class="card-footer">
<div class="card-amount">$15,000</div>
<span class="badge badge-slate">New</span>
</div>
</a>
</div>
</div>
<!-- Screening -->
<div class="kanban-column screening">
<div class="kanban-header" style="border-left:3px solid #60a5fa;">
<span>Screening <span class="count">(2)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Consulting Retainer</div>
<div class="card-subtitle">NordicTech · Jóna J.</div>
<div class="card-footer">
<div class="card-amount">$12,000</div>
<span class="badge badge-blue">Screening</span>
</div>
</a>
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Data Analytics Platform</div>
<div class="card-subtitle">DataFlow Inc · Guðrún P.</div>
<div class="card-footer">
<div class="card-amount">$65,000</div>
<span class="badge badge-blue">Screening</span>
</div>
</a>
</div>
</div>
<!-- Meeting -->
<div class="kanban-column meeting">
<div class="kanban-header" style="border-left:3px solid #818cf8;">
<span>Meeting <span class="count">(2)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">NordicTech Platform Deal</div>
<div class="card-subtitle">NordicTech · Jóna J.</div>
<div class="card-footer">
<div class="card-amount">$45,000</div>
<span class="badge badge-indigo">Meeting</span>
</div>
</a>
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">ML Pipeline Integration</div>
<div class="card-subtitle">Arktis AI · Björn J.</div>
<div class="card-footer">
<div class="card-amount">$32,000</div>
<span class="badge badge-indigo">Meeting</span>
</div>
</a>
</div>
</div>
<!-- Proposal -->
<div class="kanban-column proposal">
<div class="kanban-header" style="border-left:3px solid #a78bfa;">
<span>Proposal <span class="count">(1)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Enterprise License Deal</div>
<div class="card-subtitle">DataFlow Inc · Guðrún P.</div>
<div class="card-footer">
<div class="card-amount">$85,000</div>
<span class="badge badge-violet">Proposal</span>
</div>
</a>
</div>
</div>
<!-- Negotiation -->
<div class="kanban-column negotiation">
<div class="kanban-header" style="border-left:3px solid #f59e0b;">
<span>Negotiation <span class="count">(1)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Arktis AI Partnership</div>
<div class="card-subtitle">Arktis AI · Sigurður M.</div>
<div class="card-footer">
<div class="card-amount">$55,000</div>
<span class="badge badge-amber">Negotiation</span>
</div>
</a>
</div>
</div>
<!-- Won -->
<div class="kanban-column won">
<div class="kanban-header" style="border-left:3px solid #22c55e;">
<span>Won <span class="count">(1)</span></span>
</div>
<div class="kanban-calls">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Q2 Infrastructure Upgrade</div>
<div class="card-subtitle">DataFlow Inc · Helga K.</div>
<div class="card-footer">
<div class="card-amount">$32,000</div>
<span class="badge badge-green">Won</span>
</div>
</a>
</div>
</div>
<!-- Lost -->
<div class="kanban-column lost">
<div class="kanban-header" style="border-left:3px solid #ef4444;">
<span>Lost <span class="count">(1)</span></span>
</div>
<div class="kanban-cards">
<a href="/opportunity-detail.html" class="kanban-card" style="text-decoration:none;color:inherit;">
<div class="card-title">Legacy Migration Deal</div>
<div class="card-subtitle">IceCloud Systems</div>
<div class="card-footer">
<div class="card-amount">$8,000</div>
<span class="badge badge-red">Lost</span>
</div>
</a>
</div>
</div>
</div>
<!-- Drop zone example -->
<div style="margin-top:var(--space-4);">
<div class="kanban-dropzone">Drop deals here to change their stage</div>
</div>
</div>
<!-- Table View (hidden by default) -->
<div id="table-view" style="display:none;">
<div class="table-container">
<table>
<thead>
<tr>
<th class="sortable">Deal Name</th>
<th>Contact</th>
<th>Company</th>
<th>Amount</th>
<th>Stage</th>
<th>Close Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/opportunity-detail.html" style="font-weight:var(--weight-medium);">NordicTech Platform Deal</a></td>
<td class="cell-muted">Jóna Jónsdóttir</td>
<td class="cell-muted">NordicTech</td>
<td style="font-weight:var(--weight-semibold);">$45,000</td>
<td><span class="badge badge-indigo">Meeting</span></td>
<td class="cell-muted">Jul 30, 2026</td>
</tr>
<tr>
<td><a href="/opportunity-detail.html" style="font-weight:var(--weight-medium);">Enterprise License Deal</a></td>
<td class="cell-muted">Guðrún Pálsdóttir</td>
<td class="cell-muted">DataFlow Inc</td>
<td style="font-weight:var(--weight-semibold);">$85,000</td>
<td><span class="badge badge-violet">Proposal</span></td>
<td class="cell-muted">Aug 10, 2026</td>
</tr>
<tr>
<td><a href="/opportunity-detail.html" style="font-weight:var(--weight-medium);">Data Analytics Platform</a></td>
<td class="cell-muted">Guðrún Pálsdóttir</td>
<td class="cell-muted">DataFlow Inc</td>
<td style="font-weight:var(--weight-semibold);">$65,000</td>
<td><span class="badge badge-blue">Screening</span></td>
<td class="cell-muted">Aug 22, 2026</td>
</tr>
<tr>
<td><a href="/opportunity-detail.html" style="font-weight:var(--weight-medium);">Arktis AI Partnership</a></td>
<td class="cell-muted">Sigurður Magnússon</td>
<td class="cell-muted">Arktis AI</td>
<td style="font-weight:var(--weight-semibold);">$55,000</td>
<td><span class="badge badge-amber">Negotiation</span></td>
<td class="cell-muted">Jul 15, 2026</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="toast-container" id="toast-container"></div>
<script type="module" src="app.js"></script>
<script type="module">
document.getElementById('view-kanban').addEventListener('click', () => {
document.getElementById('kanban-view').style.display = 'block';
document.getElementById('table-view').style.display = 'none';
document.querySelectorAll('#view-kanban, #view-table').forEach(b => b.classList.remove('active'));
document.getElementById('view-kanban').classList.add('active');
});
document.getElementById('view-table').addEventListener('click', () => {
document.getElementById('kanban-view').style.display = 'none';
document.getElementById('table-view').style.display = 'block';
document.querySelectorAll('#view-kanban, #view-table').forEach(b => b.classList.remove('active'));
document.getElementById('view-table').classList.add('active');
});
</script>
</body>
</html>