Claude opus authored everything to make the user and task work. First iteration

2026-03-07 21:39:10 -05:00
parent 8ab1efcca7
commit 2bee7dce43
25 changed files with 2003 additions and 164 deletions
--- a/Provider/frontend/src/lib/Sidebar.svelte
+++ b/Provider/frontend/src/lib/Sidebar.svelte
@@ -0,0 +1,135 @@
+<script>
+  let { currentView = 'dashboard', onNavigate = () => {} } = $props();
+  let collapsed = $state(false);
+
+  const navItems = [
+    { id: 'dashboard', label: 'Dashboard', icon: '🏠' },
+    { id: 'tasks', label: 'Tasks', icon: '📋' },
+  ];
+</script>
+
+<aside class="sidebar {collapsed ? 'collapsed' : ''}">
+  <div class="sidebar-header">
+    {#if !collapsed}
+      <span class="sidebar-title">Menu</span>
+    {/if}
+    <button
+      class="collapse-btn"
+      onclick={() => collapsed = !collapsed}
+      title={collapsed ? 'Expand' : 'Collapse'}
+    >
+      {collapsed ? '▶' : '◀'}
+    </button>
+  </div>
+
+  <nav class="sidebar-nav">
+    {#each navItems as item}
+      <button
+        class="nav-item {currentView === item.id ? 'active' : ''}"
+        onclick={() => onNavigate(item.id)}
+        title={item.label}
+      >
+        <span class="nav-icon">{item.icon}</span>
+        {#if !collapsed}
+          <span class="nav-label">{item.label}</span>
+        {/if}
+      </button>
+    {/each}
+  </nav>
+</aside>
+
+<style>
+  .sidebar {
+    width: 200px;
+    min-height: 100vh;
+    background: var(--color-bg-card);
+    border-right: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    transition: width 0.25s ease;
+    flex-shrink: 0;
+  }
+
+  .sidebar.collapsed {
+    width: 56px;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 12px;
+    border-bottom: 1px solid var(--color-border);
+    min-height: 56px;
+  }
+
+  .sidebar-title {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .collapse-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    font-size: 10px;
+    border-radius: 4px;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+  }
+
+  .collapse-btn:hover {
+    color: var(--color-text-primary);
+    background: var(--color-bg-card-hover);
+  }
+
+  .sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+  }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.15s;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  .nav-item:hover {
+    background: var(--color-bg-card-hover);
+    color: var(--color-text-primary);
+  }
+
+  .nav-item.active {
+    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+    color: var(--color-accent);
+  }
+
+  .nav-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+  }
+
+  .nav-label {
+    overflow: hidden;
+  }
+</style>
--- a/Provider/frontend/src/lib/TaskManager.svelte
+++ b/Provider/frontend/src/lib/TaskManager.svelte
@@ -0,0 +1,456 @@
+<script>
+  import { getTasks, addTask, updateTask, deleteTask } from './api.js';
+  import UserManager from './UserManager.svelte';
+
+  let selectedUserId = $state(null);
+  let tasks = $state([]);
+  let error = $state('');
+
+  // Add task form state
+  let newTitle = $state('');
+  let newDueDate = $state('');
+  let showAddForm = $state(false);
+
+  // Edit state
+  let editingTaskId = $state(null);
+  let editTitle = $state('');
+  let editDueDate = $state('');
+
+  // Confirm delete
+  let confirmDeleteId = $state(null);
+
+  async function fetchTasks() {
+    if (!selectedUserId) {
+      tasks = [];
+      return;
+    }
+    try {
+      tasks = await getTasks(selectedUserId);
+      // Sort by due_date ascending
+      tasks.sort((a, b) => a.due_date - b.due_date);
+      error = '';
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  // Refetch when selected user changes
+  $effect(() => {
+    if (selectedUserId) {
+      fetchTasks();
+    } else {
+      tasks = [];
+    }
+  });
+
+  async function handleAddTask(e) {
+    e.preventDefault();
+    if (!newTitle.trim() || !newDueDate) return;
+
+    const dueTimestamp = Math.floor(new Date(newDueDate).getTime() / 1000);
+    try {
+      await addTask(selectedUserId, newTitle.trim(), dueTimestamp);
+      newTitle = '';
+      newDueDate = '';
+      showAddForm = false;
+      await fetchTasks();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function handleToggleComplete(task) {
+    try {
+      await updateTask(task.id, { completed: !task.completed });
+      await fetchTasks();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  function startEditing(task) {
+    editingTaskId = task.id;
+    editTitle = task.title;
+    editDueDate = formatDateForInput(task.due_date);
+  }
+
+  async function saveEdit(e) {
+    e.preventDefault();
+    if (!editTitle.trim()) return;
+
+    const dueTimestamp = Math.floor(new Date(editDueDate).getTime() / 1000);
+    try {
+      await updateTask(editingTaskId, {
+        title: editTitle.trim(),
+        due_date: dueTimestamp
+      });
+      editingTaskId = null;
+      await fetchTasks();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function handleDelete(id) {
+    try {
+      await deleteTask(id);
+      confirmDeleteId = null;
+      await fetchTasks();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  function formatDateForInput(timestamp) {
+    const d = new Date(timestamp * 1000);
+    return d.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:mm"
+  }
+
+  function formatRelativeDate(timestamp) {
+    const now = Date.now() / 1000;
+    const diff = timestamp - now;
+    const absDiff = Math.abs(diff);
+
+    if (absDiff < 3600) {
+      const mins = Math.round(absDiff / 60);
+      return diff < 0 ? `${mins}m ago` : `in ${mins}m`;
+    }
+    if (absDiff < 86400) {
+      const hours = Math.round(absDiff / 3600);
+      return diff < 0 ? `${hours}h ago` : `in ${hours}h`;
+    }
+    const days = Math.round(absDiff / 86400);
+    return diff < 0 ? `${days}d ago` : `in ${days}d`;
+  }
+
+  function isOverdue(timestamp) {
+    return timestamp < Date.now() / 1000;
+  }
+</script>
+
+<div class="task-manager">
+  <UserManager bind:selectedUserId onUsersChanged={fetchTasks} />
+
+  {#if selectedUserId}
+    <div class="task-header">
+      <h2 class="task-title">Tasks</h2>
+      {#if !showAddForm}
+        <button class="add-task-btn" onclick={() => showAddForm = true}>+ Add Task</button>
+      {/if}
+    </div>
+
+    {#if showAddForm}
+      <form class="add-task-form" onsubmit={handleAddTask}>
+        <input
+          type="text"
+          bind:value={newTitle}
+          placeholder="Task title..."
+          class="task-input"
+          autofocus
+        />
+        <input
+          type="datetime-local"
+          bind:value={newDueDate}
+          class="task-date-input"
+        />
+        <div class="form-actions">
+          <button type="submit" class="btn-primary" disabled={!newTitle.trim() || !newDueDate}>Add</button>
+          <button type="button" class="btn-secondary" onclick={() => { showAddForm = false; newTitle = ''; newDueDate = ''; }}>Cancel</button>
+        </div>
+      </form>
+    {/if}
+
+    <div class="task-list">
+      {#each tasks as task}
+        <div class="task-item {task.completed ? 'completed' : ''} {isOverdue(task.due_date) && !task.completed ? 'overdue' : ''}">
+          {#if editingTaskId === task.id}
+            <form class="edit-form" onsubmit={saveEdit}>
+              <input type="text" bind:value={editTitle} class="task-input" />
+              <input type="datetime-local" bind:value={editDueDate} class="task-date-input" />
+              <div class="form-actions">
+                <button type="submit" class="btn-primary btn-sm">Save</button>
+                <button type="button" class="btn-secondary btn-sm" onclick={() => editingTaskId = null}>Cancel</button>
+              </div>
+            </form>
+          {:else}
+            <div class="task-left">
+              <input
+                type="checkbox"
+                checked={task.completed}
+                onchange={() => handleToggleComplete(task)}
+                class="task-checkbox"
+              />
+              <div class="task-info">
+                <span class="task-text">{task.title}</span>
+                <span class="task-due {isOverdue(task.due_date) && !task.completed ? 'text-overdue' : ''}">
+                  {formatRelativeDate(task.due_date)}
+                </span>
+              </div>
+            </div>
+            <div class="task-actions">
+              <button class="action-btn" onclick={() => startEditing(task)} title="Edit">✏️</button>
+              {#if confirmDeleteId === task.id}
+                <button class="action-btn text-danger" onclick={() => handleDelete(task.id)} title="Confirm">✓</button>
+                <button class="action-btn" onclick={() => confirmDeleteId = null} title="Cancel">✕</button>
+              {:else}
+                <button class="action-btn" onclick={() => confirmDeleteId = task.id} title="Delete">🗑️</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {:else}
+        <div class="empty-state">No tasks yet. Add one above!</div>
+      {/each}
+    </div>
+  {:else}
+    <div class="empty-state">Select or add a user to see their tasks.</div>
+  {/if}
+
+  {#if error}
+    <div class="task-error">{error}</div>
+  {/if}
+</div>
+
+<style>
+  .task-manager {
+    width: 100%;
+  }
+
+  .task-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .task-title {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-primary);
+  }
+
+  .add-task-btn {
+    padding: 6px 14px;
+    border-radius: 8px;
+    border: 1px solid var(--color-accent);
+    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+    color: var(--color-accent);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    transition: all 0.15s;
+  }
+
+  .add-task-btn:hover {
+    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  }
+
+  .add-task-form, .edit-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-card);
+    margin-bottom: 12px;
+  }
+
+  .task-input {
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-size: 13px;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .task-input:focus {
+    border-color: var(--color-accent);
+  }
+
+  .task-date-input {
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-size: 13px;
+    outline: none;
+    color-scheme: dark;
+  }
+
+  .task-date-input:focus {
+    border-color: var(--color-accent);
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 6px;
+  }
+
+  .btn-primary {
+    padding: 6px 16px;
+    border-radius: 8px;
+    border: none;
+    background: var(--color-accent);
+    color: white;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    transition: filter 0.15s;
+  }
+
+  .btn-primary:hover {
+    filter: brightness(1.1);
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .btn-secondary {
+    padding: 6px 16px;
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.15s;
+  }
+
+  .btn-secondary:hover {
+    background: var(--color-bg-card-hover);
+  }
+
+  .btn-sm {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+
+  .task-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .task-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-card);
+    transition: all 0.15s;
+  }
+
+  .task-item:hover {
+    background: var(--color-bg-card-hover);
+  }
+
+  .task-item.completed {
+    opacity: 0.5;
+  }
+
+  .task-item.overdue {
+    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
+  }
+
+  .task-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .task-checkbox {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-accent);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .task-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .task-text {
+    font-size: 13px;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .completed .task-text {
+    text-decoration: line-through;
+    color: var(--color-text-secondary);
+  }
+
+  .task-due {
+    font-size: 10px;
+    color: var(--color-text-secondary);
+    font-weight: 500;
+  }
+
+  .text-overdue {
+    color: var(--color-danger) !important;
+  }
+
+  .text-danger {
+    color: var(--color-danger);
+  }
+
+  .task-actions {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .action-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 4px;
+    border-radius: 4px;
+    transition: background 0.15s;
+    opacity: 0.6;
+  }
+
+  .action-btn:hover {
+    opacity: 1;
+    background: var(--color-bg-card-hover);
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 32px;
+    color: var(--color-text-secondary);
+    font-size: 13px;
+  }
+
+  .task-error {
+    margin-top: 8px;
+    padding: 6px 10px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
+    color: var(--color-danger);
+    font-size: 11px;
+  }
+</style>
--- a/Provider/frontend/src/lib/UserManager.svelte
+++ b/Provider/frontend/src/lib/UserManager.svelte
@@ -0,0 +1,269 @@
+<script>
+  import { getUsers, addUser, removeUser } from './api.js';
+
+  let { selectedUserId = $bindable(null), onUsersChanged = () => {} } = $props();
+
+  let users = $state([]);
+  let newUserName = $state('');
+  let showAddForm = $state(false);
+  let error = $state('');
+  let confirmDeleteId = $state(null);
+
+  async function fetchUsers() {
+    try {
+      users = await getUsers();
+      if (users.length > 0 && !selectedUserId) {
+        selectedUserId = users[0].id;
+      }
+      // If selected user was deleted, select first available
+      if (selectedUserId && !users.find(u => u.id === selectedUserId)) {
+        selectedUserId = users.length > 0 ? users[0].id : null;
+      }
+      error = '';
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function handleAddUser() {
+    if (!newUserName.trim()) return;
+    try {
+      const user = await addUser(newUserName.trim());
+      newUserName = '';
+      showAddForm = false;
+      await fetchUsers();
+      selectedUserId = user.id;
+      onUsersChanged();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function handleRemoveUser(id) {
+    try {
+      await removeUser(id);
+      confirmDeleteId = null;
+      await fetchUsers();
+      onUsersChanged();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  $effect(() => {
+    fetchUsers();
+  });
+</script>
+
+<div class="user-manager">
+  <div class="user-bar">
+    <div class="user-chips">
+      {#each users as user}
+        <button
+          class="user-chip {selectedUserId === user.id ? 'selected' : ''}"
+          onclick={() => selectedUserId = user.id}
+        >
+          <span class="user-name">{user.name}</span>
+          {#if confirmDeleteId === user.id}
+            <span class="confirm-delete">
+              <button class="confirm-yes" onclick={(e) => { e.stopPropagation(); handleRemoveUser(user.id); }} title="Confirm delete">✓</button>
+              <button class="confirm-no" onclick={(e) => { e.stopPropagation(); confirmDeleteId = null; }} title="Cancel">✕</button>
+            </span>
+          {:else}
+            <button
+              class="remove-btn"
+              onclick={(e) => { e.stopPropagation(); confirmDeleteId = user.id; }}
+              title="Remove user"
+            >✕</button>
+          {/if}
+        </button>
+      {/each}
+
+      {#if showAddForm}
+        <form class="add-user-form" onsubmit={(e) => { e.preventDefault(); handleAddUser(); }}>
+          <input
+            type="text"
+            bind:value={newUserName}
+            placeholder="Name..."
+            class="add-user-input"
+            autofocus
+          />
+          <button type="submit" class="add-user-submit" disabled={!newUserName.trim()}>+</button>
+          <button type="button" class="add-user-cancel" onclick={() => { showAddForm = false; newUserName = ''; }}>✕</button>
+        </form>
+      {:else}
+        <button class="add-user-btn" onclick={() => showAddForm = true}>
+          + User
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  {#if error}
+    <div class="user-error">{error}</div>
+  {/if}
+</div>
+
+<style>
+  .user-manager {
+    margin-bottom: 16px;
+  }
+
+  .user-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .user-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .user-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-card);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: all 0.15s;
+  }
+
+  .user-chip:hover {
+    border-color: var(--color-accent);
+    color: var(--color-text-primary);
+  }
+
+  .user-chip.selected {
+    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  .user-name {
+    white-space: nowrap;
+  }
+
+  .remove-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 10px;
+    padding: 0 2px;
+    opacity: 0.5;
+    transition: opacity 0.15s, color 0.15s;
+    line-height: 1;
+  }
+
+  .remove-btn:hover {
+    opacity: 1;
+    color: var(--color-danger);
+  }
+
+  .confirm-delete {
+    display: flex;
+    gap: 4px;
+  }
+
+  .confirm-yes, .confirm-no {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 11px;
+    padding: 0 2px;
+    line-height: 1;
+  }
+
+  .confirm-yes {
+    color: var(--color-danger);
+  }
+
+  .confirm-no {
+    color: var(--color-text-secondary);
+  }
+
+  .add-user-btn {
+    padding: 6px 12px;
+    border-radius: 20px;
+    border: 1px dashed var(--color-border);
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: all 0.15s;
+  }
+
+  .add-user-btn:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  .add-user-form {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .add-user-input {
+    padding: 5px 10px;
+    border-radius: 16px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-size: 12px;
+    width: 100px;
+    outline: none;
+  }
+
+  .add-user-input:focus {
+    border-color: var(--color-accent);
+  }
+
+  .add-user-submit {
+    background: var(--color-accent);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .add-user-submit:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .add-user-cancel {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .user-error {
+    margin-top: 8px;
+    padding: 6px 10px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
+    color: var(--color-danger);
+    font-size: 11px;
+  }
+</style>
--- a/Provider/frontend/src/lib/api.js
+++ b/Provider/frontend/src/lib/api.js
@@ -116,3 +116,127 @@ export async function uploadOTABundle(file) {
    
    return res.json();
 }
+
+// ─── User Management ─────────────────────────────────────────────────────────
+
+/**
+ * Fetch all users.
+ * @returns {Promise<Array<{id: number, name: string}>>}
+ */
+export async function getUsers() {
+    const res = await fetch(`${API_BASE}/api/users`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    return res.json();
+}
+
+/**
+ * Create a new user.
+ * @param {string} name
+ * @returns {Promise<{id: number, name: string}>}
+ */
+export async function addUser(name) {
+    const res = await fetch(`${API_BASE}/api/users`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name })
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+
+/**
+ * Delete a user and all their tasks.
+ * @param {number} id
+ * @returns {Promise<{status: string}>}
+ */
+export async function removeUser(id) {
+    const res = await fetch(`${API_BASE}/api/users?id=${id}`, {
+        method: 'DELETE'
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+
+// ─── Task Management ─────────────────────────────────────────────────────────
+
+/**
+ * Fetch tasks for a specific user.
+ * @param {number} userId
+ * @returns {Promise<Array<{id: number, user_id: number, title: string, due_date: number, completed: boolean}>>}
+ */
+export async function getTasks(userId) {
+    const res = await fetch(`${API_BASE}/api/tasks?user_id=${userId}`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    return res.json();
+}
+
+/**
+ * Fetch top 3 upcoming tasks per user (for Dashboard).
+ * @returns {Promise<{users: Array<{id: number, name: string, tasks: Array}>}>}
+ */
+export async function getUpcomingTasks() {
+    const res = await fetch(`${API_BASE}/api/tasks/upcoming`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    return res.json();
+}
+
+/**
+ * Create a new task.
+ * @param {number} userId
+ * @param {string} title
+ * @param {number} dueDate Unix timestamp in seconds
+ * @returns {Promise<{id: number, user_id: number, title: string, due_date: number, completed: boolean}>}
+ */
+export async function addTask(userId, title, dueDate) {
+    const res = await fetch(`${API_BASE}/api/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_id: userId, title, due_date: dueDate })
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+
+/**
+ * Update a task (partial update — only include fields you want to change).
+ * @param {number} id
+ * @param {Object} fields - { title?: string, due_date?: number, completed?: boolean }
+ * @returns {Promise<{status: string}>}
+ */
+export async function updateTask(id, fields) {
+    const res = await fetch(`${API_BASE}/api/tasks/update`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, ...fields })
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+
+/**
+ * Delete a task.
+ * @param {number} id
+ * @returns {Promise<{status: string}>}
+ */
+export async function deleteTask(id) {
+    const res = await fetch(`${API_BASE}/api/tasks?id=${id}`, {
+        method: 'DELETE'
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}