BuzzbeeSCD/ProjectE
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: 7 UX bugs across dashboard, tasks, projects, calendar, settings

Browse Source 
- Dashboard: fetch project progress from /api/projects/[id]/progress
- Tasks List: add DropdownMenuTrigger to More options button
- Projects: add New project button with CreateItemDialog integration
- Settings: use color picker value when creating domains
- Calendar: use dynamic domain options instead of hardcoded list
- Dashboard: make View all button navigate to /tasks
- Dashboard: domain names already resolved via domainMap (verified working)
This commit is contained in:
bot-hermes
2026-07-26 01:22:41 +00:00
parent 953a947874
commit af7d05be0f
6 changed files with 72 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(dashboard)/calendar/page.tsx
+7 -7
View File
@@ -248,15 +248,15 @@ export default function CalendarPage() {
<div className="space-y-3">
<h2 className="text-sm font-semibold">Domains</h2>
<div className="space-y-2">
{['personal', 'work', 'ots'].map((domain) => (
<div key={domain} className="flex items-center space-x-2">
{(domainOptions.length > 0 ? domainOptions : []).map((domain) => (
<div key={domain.id} className="flex items-center space-x-2">
<Checkbox
id={domain}
checked={selectedDomains.includes(domain)}
onCheckedChange={() => toggleDomain(domain)}
id={domain.id}
checked={selectedDomains.includes(domain.id)}
onCheckedChange={() => toggleDomain(domain.id)}
/>
<Label htmlFor={domain}>
<Badge variant="outline">{domain}</Badge>
<Label htmlFor={domain.id}>
<Badge variant="outline">{domain.name}</Badge>
</Label>
</div>
))}
apps/web/app/(dashboard)/projects/page.tsx
+10 -2
View File
@@ -1,13 +1,15 @@
"use client";
import { useEffect, useState } from "react";
import { Trash2 } from "lucide-react";
import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import Link from "next/link";
import { CreateItemDialog } from "@/components/create-item-dialog";
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
interface Project {
id: string;
@@ -22,6 +24,8 @@ export default function ProjectsPage() {
const [loading, setLoading] = useState(true);
const [deleteId, setDeleteId] = useState<string | null>(null);
const [deleting, setDeleting] = useState(false);
const [refreshKey, setRefreshKey] = useState(0);
const { open, openCreate, closeCreate } = useCreateDialogStore();
useEffect(() => { fetchProjects(); fetchDomains(); }, []);
@@ -64,9 +68,12 @@ export default function ProjectsPage() {
<h1 className="text-2xl font-bold">Projects</h1>
<p className="mt-1 text-muted-foreground">Plan and track your work.</p>
</div>
<Button onClick={() => openCreate("project")}>
<Plus className="mr-2 h-4 w-4" aria-hidden="true" /> New project
</Button>
</div>
{projects.length === 0 ? <p className="text-muted-foreground">No projects yet.</p> : (
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div key={refreshKey} className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{projects.map((p) => (
<Card key={p.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4">
@@ -97,6 +104,7 @@ export default function ProjectsPage() {
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<CreateItemDialog type="project" open={open} onOpenChange={(o) => (o ? openCreate("project") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
</div>
);
}
apps/web/components/dashboard/widgets/project-progress-widget.tsx
+15 -1
View File
@@ -26,7 +26,21 @@ export function ProjectProgressWidget() {
);
if (response.ok) {
const data = await response.json();
setProjects(data.items || []);
const items = data.items || [];
// Fetch progress for each project since the list API doesn't include it
const withProgress = await Promise.all(
items.map(async (p: { id: string; name: string }) => {
try {
const progRes = await fetch(`/api/projects/${p.id}/progress`);
if (progRes.ok) {
const progData = await progRes.json();
return { ...p, progress: progData.progress ?? 0 };
}
} catch {}
return { ...p, progress: 0 };
})
);
setProjects(withProgress);
}
} catch (error) {
console.error('Failed to fetch projects:', error);
apps/web/components/dashboard/widgets/today-tasks-widget.tsx
+16 -1
View File
@@ -5,6 +5,7 @@ import { CheckCircle2, Circle, ListTodo } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { useRouter } from 'next/navigation';
interface Task {
id: string;
@@ -20,11 +21,25 @@ export function TodayTasksWidget() {
const [tasks, setTasks] = useState<Task[]>([]);
const [loading, setLoading] = useState(true);
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
const router = useRouter();
useEffect(() => {
fetchTasks();
fetchDomains();
}, []);
async function fetchDomains() {
try {
const res = await fetch("/api/domains?sort=sort_order");
if (res.ok) {
const data = await res.json();
const map = new Map<string, string>();
for (const d of data.items || []) map.set(d.id, d.name);
setDomainMap(map);
}
} catch {}
}
async function fetchTasks() {
try {
const response = await fetch(
@@ -63,7 +78,7 @@ export function TodayTasksWidget() {
<ListTodo className="h-4 w-4" aria-hidden="true" />
Today&apos;s Tasks
</CardTitle>
<Button variant="ghost" size="sm" className="h-7 text-xs">
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => router.push('/tasks')}>
View all
</Button>
</div>
apps/web/components/settings/settings-domains.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function SettingsDomains() {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: newDomainName,
color: '#3b82f6',
color: newDomainColor,
icon: '📁',
sort_order: domains.length,
}),
apps/web/components/tasks/tasks-list-view.tsx
+23 -9
View File
@@ -13,7 +13,7 @@ import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Calendar, MoreHorizontal } from 'lucide-react';
import { Calendar, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
import { TaskDetailPanel } from './task-detail-panel';
import {
@@ -157,14 +157,28 @@ export function TasksListView() {
)}
</TableCell>
<TableCell>
<Button
variant="ghost"
size="icon"
className="h-11 w-11"
aria-label={`More options for ${task.title}`}
>
<MoreHorizontal className="h-4 w-4" aria-hidden="true" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-11 w-11"
aria-label={`More options for ${task.title}`}
>
<MoreHorizontal className="h-4 w-4" aria-hidden="true" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setSelectedTask(task)}>
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem className="text-destructive" onClick={() => setDeleteId(task.id)}>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}