225 lines
13 KiB
HTML
225 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OrgMyLife</title>
|
|
<link rel="stylesheet" href="/static/css/style.css?v=17">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>OrgMyLife</h1>
|
|
<p>Your tidy coordination system.</p>
|
|
<nav class="top-nav" style="margin-top: 15px;">
|
|
<button id="nav-dashboard" class="nav-btn active">Dashboard</button>
|
|
<button id="nav-tasks" class="nav-btn">All Tasks</button>
|
|
<button id="nav-projects" class="nav-btn">Projects</button>
|
|
<button id="nav-calls" class="nav-btn">📞 Calls</button>
|
|
<button id="nav-digest" class="nav-btn">Daily Digest</button>
|
|
<button id="nav-retro" class="nav-btn">Weekly Retro</button>
|
|
</nav>
|
|
<div class="actions" style="margin-top: 10px;">
|
|
<button id="sync-all-btn" class="btn" style="padding: 8px 16px; cursor: pointer; background: #1a73e8; color: white; border: none; border-radius: 4px; font-weight: 500;">⟳ Sync All</button>
|
|
<button id="sync-backlog-btn" class="btn" style="padding: 8px 16px; cursor: pointer;">Sync Backlog</button>
|
|
<button id="sync-todo-btn" class="btn" style="padding: 8px 16px; cursor: pointer;">Sync ToDo</button>
|
|
<button id="sync-email-btn" class="btn" style="padding: 8px 16px; cursor: pointer;">Sync Email</button>
|
|
<button id="sync-gmail-btn" class="btn" style="padding: 8px 16px; cursor: pointer;">Sync Gmail</button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div id="dashboard">
|
|
<section id="digest-section" class="card">
|
|
<h2>Daily Digest</h2>
|
|
<p id="digest-content">Loading your digest...</p>
|
|
<div id="suggestions-container"></div>
|
|
</section>
|
|
|
|
<div class="grid-2">
|
|
<section id="priorities-section" class="card">
|
|
<h2>Top Priorities</h2>
|
|
<ul id="priorities-list" class="tidy-list">
|
|
<li>Loading priorities...</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="calendar-section" class="card">
|
|
<h2>Today's Calendar</h2>
|
|
<ul id="calendar-list" class="tidy-list">
|
|
<li>Loading events...</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="all-tasks-view" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
<section class="card">
|
|
<h2 id="form-heading">Add New Task</h2>
|
|
<form id="add-task-form" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px;">
|
|
<input type="hidden" id="task-edit-id" value="">
|
|
<input type="text" id="task-title" placeholder="Task Title" required maxlength="200" style="flex: 1; min-width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<input type="text" id="task-desc" placeholder="Details (optional)" maxlength="5000" style="flex: 2; min-width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<input type="date" id="task-due" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<select id="task-priority" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<option value="4">Low</option>
|
|
<option value="3">Medium</option>
|
|
<option value="2">High</option>
|
|
<option value="1">Very High</option>
|
|
</select>
|
|
<input type="text" id="task-labels" placeholder="Labels (comma-separated)" maxlength="200" style="min-width: 160px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<button type="submit" id="form-submit-btn" class="btn" style="padding: 8px 16px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer;">Add</button>
|
|
<button type="button" id="form-cancel-btn" class="btn" style="padding: 8px 16px; background: #666; color: white; border: none; border-radius: 4px; cursor: pointer; display: none;">Cancel</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>All Open Tasks <small style="font-weight: normal; font-size: 0.75rem; color: #888;">drag to reorder</small></h2>
|
|
<div class="sort-bar">
|
|
<span style="font-size: 0.85rem; color: #666;">Sort:</span>
|
|
<button class="sort-btn active" data-sort="">Manual</button>
|
|
<button class="sort-btn" data-sort="priority">Priority</button>
|
|
<button class="sort-btn" data-sort="due_date">Due Date</button>
|
|
<button class="sort-btn" data-sort="created">Created</button>
|
|
<span style="font-size: 0.85rem; color: #666; margin-left: 1rem;">Filter:</span>
|
|
<select id="filter-origin" style="padding: 3px 8px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 4px;">
|
|
<option value="">All sources</option>
|
|
<option value="manual">Manual</option>
|
|
<option value="nextcloud_todo">Nextcloud</option>
|
|
<option value="dhive_email">Email</option>
|
|
</select>
|
|
<select id="filter-agent" style="padding: 3px 8px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 4px;">
|
|
<option value="">All</option>
|
|
<option value="true">🤖 Agent</option>
|
|
<option value="false">Manual only</option>
|
|
</select>
|
|
<select id="filter-label" style="padding: 3px 8px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 4px;">
|
|
<option value="">All labels</option>
|
|
</select>
|
|
</div>
|
|
<ul id="all-tasks-list" class="tidy-list">
|
|
<li>Loading tasks...</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="digest-view" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
<section class="card">
|
|
<h2 id="digest-greeting">Loading...</h2>
|
|
<p id="digest-date" style="color: #666;"></p>
|
|
</section>
|
|
<div class="grid-2">
|
|
<section class="card">
|
|
<h2>⚠️ Overdue</h2>
|
|
<ul id="digest-overdue" class="tidy-list"><li>Loading...</li></ul>
|
|
</section>
|
|
<section class="card">
|
|
<h2>📅 Due Today</h2>
|
|
<ul id="digest-due-today" class="tidy-list"><li>Loading...</li></ul>
|
|
</section>
|
|
</div>
|
|
<div class="grid-2">
|
|
<section class="card">
|
|
<h2>🎯 Top Priorities</h2>
|
|
<ul id="digest-top-tasks" class="tidy-list"><li>Loading...</li></ul>
|
|
</section>
|
|
<section class="card">
|
|
<h2>📆 Today's Schedule</h2>
|
|
<ul id="digest-events" class="tidy-list"><li>Loading...</li></ul>
|
|
</section>
|
|
</div>
|
|
<section id="digest-calls-section" class="card" style="display: none;">
|
|
<h2>📞 Calls to make</h2>
|
|
<ul id="digest-calls" class="tidy-list"></ul>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="retro-view" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
<section class="card">
|
|
<h2>📊 Weekly Retrospective</h2>
|
|
<p id="retro-period" style="color: #666;"></p>
|
|
</section>
|
|
<div class="grid-2">
|
|
<section class="card">
|
|
<h2>Summary</h2>
|
|
<div id="retro-summary"></div>
|
|
</section>
|
|
<section class="card">
|
|
<h2>Backlog Health</h2>
|
|
<div id="retro-health"></div>
|
|
</section>
|
|
</div>
|
|
<div class="grid-2">
|
|
<section class="card">
|
|
<h2>Priority Breakdown</h2>
|
|
<div id="retro-priorities"></div>
|
|
</section>
|
|
<section class="card">
|
|
<h2>⚠️ Still Overdue</h2>
|
|
<ul id="retro-overdue" class="tidy-list"><li>Loading...</li></ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="projects-view" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
<section class="card">
|
|
<h2>AI Projects Board</h2>
|
|
<p style="color: #666; margin-top: 0;">Manage your AI agent tasks across repos</p>
|
|
<form id="add-project-task-form" style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
|
|
<input type="text" id="pt-title" placeholder="Task title" required maxlength="200" style="flex: 2; min-width: 180px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<input type="text" id="pt-repo" placeholder="Repo (e.g. OrgMyLife)" maxlength="100" style="flex: 1; min-width: 120px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<button type="submit" class="btn" style="padding: 8px 16px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer;">Add</button>
|
|
</form>
|
|
</section>
|
|
<div class="kanban-board">
|
|
<div class="kanban-column" data-status="backlog">
|
|
<h3>📋 Backlog</h3>
|
|
<div class="kanban-cards" id="kanban-backlog"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="ready">
|
|
<h3>🟢 Ready</h3>
|
|
<div class="kanban-cards" id="kanban-ready"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="in_progress">
|
|
<h3>⚙️ In Progress</h3>
|
|
<div class="kanban-cards" id="kanban-in_progress"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="blocked">
|
|
<h3>🚫 Blocked</h3>
|
|
<div class="kanban-cards" id="kanban-blocked"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="review">
|
|
<h3>👁 Review</h3>
|
|
<div class="kanban-cards" id="kanban-review"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="done">
|
|
<h3>✅ Done</h3>
|
|
<div class="kanban-cards" id="kanban-done"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="calls-view" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
<section class="card">
|
|
<h2>📞 Call List</h2>
|
|
<p style="color: #666; margin-top: 0;">Pending phone calls to make</p>
|
|
<form id="add-call-form" style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center;">
|
|
<input type="text" id="call-person" placeholder="Person" required maxlength="200" style="flex: 1; min-width: 140px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<input type="text" id="call-reason" placeholder="Reason" required maxlength="500" style="flex: 2; min-width: 160px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<input type="text" id="call-phone" placeholder="Phone (optional)" maxlength="30" style="width: 140px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<select id="call-priority" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<option value="4">Low</option>
|
|
<option value="3" selected>Medium</option>
|
|
<option value="2">High</option>
|
|
<option value="1">Very High</option>
|
|
</select>
|
|
<button type="submit" class="btn" style="padding: 8px 16px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer;">Add Call</button>
|
|
</form>
|
|
</section>
|
|
<section class="card">
|
|
<div id="calls-list"></div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script src="/static/js/app.js?v=20"></script>
|
|
</body>
|
|
</html>
|