Enhance dashboard with 7-day lookahead, priority surfacing, and inline edit buttons
Dashboard improvements: - Added "Due This Week" section (next 7 days) and "High Priority" section (amber accent, catches high-priority tasks not already shown by date) - All task sections sort by priority desc then due date asc - Cascading deduplication via shared seen-set across all 5 sections - Combined due-today + due-this-week into single API call, split client-side - Removed unused `tomorrow` variable (fixed vue-tsc build error) Inline edit buttons: - NoteCard and TaskCard show "Edit" button on hover (always visible on touch) - Navigates directly to edit view via .prevent.stop on router-link cards - Styled as subtle bordered button, highlights to primary on hover Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+122
-29
@@ -15,37 +15,63 @@ const router = useRouter();
|
||||
const recentNotes = ref<Note[]>([]);
|
||||
const overdueTasks = ref<Task[]>([]);
|
||||
const dueTodayTasks = ref<Task[]>([]);
|
||||
const dueThisWeekTasks = ref<Task[]>([]);
|
||||
const highPriorityTasks = ref<Task[]>([]);
|
||||
const inProgressTasks = ref<Task[]>([]);
|
||||
const recentChats = ref<Conversation[]>([]);
|
||||
const loading = ref(true);
|
||||
const tasksStore = useTasksStore();
|
||||
|
||||
function todayStr(): string {
|
||||
const PRIORITY_ORDER: Record<string, number> = {
|
||||
high: 3,
|
||||
medium: 2,
|
||||
low: 1,
|
||||
none: 0,
|
||||
};
|
||||
|
||||
function dateStr(offsetDays: number = 0): string {
|
||||
const d = new Date();
|
||||
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
|
||||
d.setDate(d.getDate() + offsetDays);
|
||||
return (
|
||||
d.getFullYear() +
|
||||
"-" +
|
||||
String(d.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(d.getDate()).padStart(2, "0")
|
||||
);
|
||||
}
|
||||
|
||||
function tomorrowStr(): string {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() + 1);
|
||||
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
|
||||
function sortByPriorityThenDate(tasks: Task[]): Task[] {
|
||||
return tasks.slice().sort((a, b) => {
|
||||
const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
|
||||
const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
|
||||
if (pb !== pa) return pb - pa;
|
||||
// Earlier due dates first; null due dates last
|
||||
if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
|
||||
if (a.due_date) return -1;
|
||||
if (b.due_date) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const today = todayStr();
|
||||
const tomorrow = tomorrowStr();
|
||||
const today = dateStr(0);
|
||||
const nextWeek = dateStr(7);
|
||||
|
||||
const [notesRes, overdueRes, dueTodayRes, inProgressRes, chatsRes] =
|
||||
const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, chatsRes] =
|
||||
await Promise.allSettled([
|
||||
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=5"),
|
||||
apiGet<TaskListResponse>(
|
||||
`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=15`
|
||||
`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`
|
||||
),
|
||||
apiGet<TaskListResponse>(
|
||||
`/api/tasks?due_after=${today}&due_before=${tomorrow}&sort=priority&order=desc&limit=10`
|
||||
`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`
|
||||
),
|
||||
apiGet<TaskListResponse>(
|
||||
`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=5`
|
||||
`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`
|
||||
),
|
||||
apiGet<TaskListResponse>(
|
||||
`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`
|
||||
),
|
||||
apiGet<{ conversations: Conversation[]; total: number }>(
|
||||
"/api/chat/conversations?limit=3&offset=0"
|
||||
@@ -59,23 +85,47 @@ onMounted(async () => {
|
||||
recentChats.value = chatsRes.value.conversations;
|
||||
}
|
||||
|
||||
// Filter out done tasks from overdue and due-today
|
||||
// Build seen-set incrementally so each section deduplicates against all above it
|
||||
const seen = new Set<number>();
|
||||
|
||||
// Overdue: past due, not done
|
||||
if (overdueRes.status === "fulfilled") {
|
||||
overdueTasks.value = overdueRes.value.tasks.filter(
|
||||
(t) => t.status !== "done"
|
||||
);
|
||||
}
|
||||
if (dueTodayRes.status === "fulfilled") {
|
||||
dueTodayTasks.value = dueTodayRes.value.tasks.filter(
|
||||
(t) => t.status !== "done"
|
||||
overdueTasks.value = sortByPriorityThenDate(
|
||||
overdueRes.value.tasks.filter((t) => t.status !== "done")
|
||||
);
|
||||
for (const t of overdueTasks.value) seen.add(t.id);
|
||||
}
|
||||
|
||||
// Deduplicate in-progress against overdue and due-today
|
||||
if (inProgressRes.status === "fulfilled") {
|
||||
const seen = new Set<number>();
|
||||
for (const t of overdueTasks.value) seen.add(t.id);
|
||||
// Due soon: split into "today" and "this week", exclude done
|
||||
if (dueSoonRes.status === "fulfilled") {
|
||||
const notDone = dueSoonRes.value.tasks.filter(
|
||||
(t) => t.status !== "done" && !seen.has(t.id)
|
||||
);
|
||||
const todayList: Task[] = [];
|
||||
const weekList: Task[] = [];
|
||||
for (const t of notDone) {
|
||||
if (t.due_date === today) {
|
||||
todayList.push(t);
|
||||
} else {
|
||||
weekList.push(t);
|
||||
}
|
||||
}
|
||||
dueTodayTasks.value = sortByPriorityThenDate(todayList);
|
||||
dueThisWeekTasks.value = sortByPriorityThenDate(weekList);
|
||||
for (const t of dueTodayTasks.value) seen.add(t.id);
|
||||
for (const t of dueThisWeekTasks.value) seen.add(t.id);
|
||||
}
|
||||
|
||||
// High priority: not done, deduplicated
|
||||
if (highPriRes.status === "fulfilled") {
|
||||
highPriorityTasks.value = highPriRes.value.tasks.filter(
|
||||
(t) => t.status !== "done" && !seen.has(t.id)
|
||||
);
|
||||
for (const t of highPriorityTasks.value) seen.add(t.id);
|
||||
}
|
||||
|
||||
// In progress: deduplicated against all above
|
||||
if (inProgressRes.status === "fulfilled") {
|
||||
inProgressTasks.value = inProgressRes.value.tasks.filter(
|
||||
(t) => !seen.has(t.id)
|
||||
);
|
||||
@@ -84,10 +134,19 @@ onMounted(async () => {
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
const allTaskLists = [
|
||||
() => overdueTasks,
|
||||
() => dueTodayTasks,
|
||||
() => dueThisWeekTasks,
|
||||
() => highPriorityTasks,
|
||||
() => inProgressTasks,
|
||||
];
|
||||
|
||||
function removeFromAllLists(id: number) {
|
||||
overdueTasks.value = overdueTasks.value.filter((t) => t.id !== id);
|
||||
dueTodayTasks.value = dueTodayTasks.value.filter((t) => t.id !== id);
|
||||
inProgressTasks.value = inProgressTasks.value.filter((t) => t.id !== id);
|
||||
for (const getList of allTaskLists) {
|
||||
const list = getList();
|
||||
list.value = list.value.filter((t) => t.id !== id);
|
||||
}
|
||||
}
|
||||
|
||||
function onStatusToggle(id: number, status: TaskStatus) {
|
||||
@@ -95,8 +154,8 @@ function onStatusToggle(id: number, status: TaskStatus) {
|
||||
if (updated.status === "done") {
|
||||
removeFromAllLists(updated.id);
|
||||
} else {
|
||||
// Update in whichever list contains it
|
||||
for (const list of [overdueTasks, dueTodayTasks, inProgressTasks]) {
|
||||
for (const getList of allTaskLists) {
|
||||
const list = getList();
|
||||
const idx = list.value.findIndex((t) => t.id === updated.id);
|
||||
if (idx !== -1) {
|
||||
list.value[idx] = updated;
|
||||
@@ -152,6 +211,36 @@ async function newChat() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="dueThisWeekTasks.length" class="section">
|
||||
<div class="section-header">
|
||||
<h2>Due This Week</h2>
|
||||
<router-link to="/tasks" class="see-all">See all</router-link>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<TaskCard
|
||||
v-for="task in dueThisWeekTasks"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
@status-toggle="onStatusToggle"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="highPriorityTasks.length" class="section section-high-priority">
|
||||
<div class="section-header">
|
||||
<h2>High Priority</h2>
|
||||
<router-link to="/tasks" class="see-all">See all</router-link>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<TaskCard
|
||||
v-for="task in highPriorityTasks"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
@status-toggle="onStatusToggle"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="inProgressTasks.length" class="section">
|
||||
<div class="section-header">
|
||||
<h2>In Progress</h2>
|
||||
@@ -229,6 +318,10 @@ async function newChat() {
|
||||
border-left: 3px solid var(--color-overdue, #e74c3c);
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
.section-high-priority {
|
||||
border-left: 3px solid var(--color-warning, #f59e0b);
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user