Menu
Public repository / a986cdcc29b5f2c7d03f819e1e5541d4751a1ea2
AkurAI-CRM / site/frontend/tasks.html
Latest change 9975e97b3c73be01a1e18b96d8bef1f708a1dcf2 - feat: suite-wide theme-sync — re-vendor theme.js + cookie flash-guard 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>Tasks — AkurAI-CRM</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="themes.css">
<script>(function () {
try {
var m = document.cookie.match(/(?:^|; )akurai-theme=([^;]*)/);
var t = (m ? decodeURIComponent(m[1]) : null) || localStorage.getItem("akurai-theme");
if (!t) t = matchMedia("(prefers-color-scheme: light)").matches ? "akurai-light" : "akurai";
document.documentElement.setAttribute("data-theme", t);
} catch (e) {}
})()</script>
<script type="module" src="theme.js"></script>
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon"><svg viewBox="0 0 32 32" fill="currentColor" role="img" aria-label="AkurAI"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.38 3.23c1.05-2.23 4.19-2.23 5.24 0l11.05 23.62A2.91 2.91 0 0 1 27.03 31h-3.42c-1.17 0-2.22-.7-2.67-1.78l-2.05-4.93h-5.78l-2.05 4.93A2.9 2.9 0 0 1 8.39 31H4.97a2.91 2.91 0 0 1-2.64-4.15L13.38 3.23ZM16 11.17l-5.13 13.1h10.26L16 11.17Z"/><path d="M10.38 20.54h11.24a2.23 2.23 0 0 1 0 4.46H10.38a2.23 2.23 0 0 1 0-4.46Z"/></svg></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">
<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 active">
<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">Tasks</div>
<div class="topbar-spacer"></div>
<div class="topbar-actions">
<button class="btn btn-primary btn-sm" onclick="console.warn('Add Task 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 Task
</button>
<span class="theme-picker" data-theme-picker></span>
</div>
</header>
<div class="main-content">
<div class="card">
<div class="task-filter-tabs">
<button class="task-filter-tab active" data-filter="all">All</button>
<button class="task-filter-tab" data-filter="todo">To Do</button>
<button class="task-filter-tab" data-filter="in-progress">In Progress</button>
<button class="task-filter-tab" data-filter="done">Done</button>
</div>
<div class="task-list" id="task-list">
</div>
<div class="pagination">
<div class="pagination-info">Showing 8 tasks</div>
</div>
</div>
</div>
</div>
</div>
<div class="toast-container" id="toast-container"></div>
<script type="module" src="app.js"></script>
<script type="module">
document.querySelectorAll('.task-filter-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.task-filter-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const filter = tab.dataset.filter;
document.querySelectorAll('.task-item').forEach(item => {
if (filter === 'all') {
item.style.display = '';
} else if (filter === 'done') {
item.style.display = item.classList.contains('done') ? '' : 'none';
} else {
item.style.display = item.dataset.status === filter ? '' : 'none';
}
});
});
});
</script>
<script type="module">
import { loadTable, renderTasksList } from './databinder.js';
document.addEventListener('DOMContentLoaded', async () => {
const data = await loadTable('tasks', 'task-list');
renderTasksList(data, 'task-list');
});
</script>
</body>
</html>