Refresh Todos page UI: compact header, stat cards, grouped list

- TodosPage: h-16 header with segmented priority filter, search, category
  dropdown, show-completed toggle, and stat cards (open/completed/overdue)
- TodoItem: hover glow, priority pills, category badges, overdue/today
  date coloring, edit + delete action buttons
- TodoList: grouped sections (overdue/today/upcoming/no date/completed)
  with section headers and EmptyState action button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/todos/TodoItem.tsx

@@ -1,12 +1,11 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { Trash2, Calendar } from 'lucide-react';
+import { Trash2, Pencil, Calendar, AlertCircle } from 'lucide-react';
-import { format } from 'date-fns';
+import { format, isToday, isPast, parseISO, startOfDay } from 'date-fns';
 import api from '@/lib/api';
 import type { Todo } from '@/types';
 import { cn } from '@/lib/utils';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 
 interface TodoItemProps {
@@ -14,11 +13,11 @@ interface TodoItemProps {
   onEdit: (todo: Todo) => void;
 }
 
-const priorityColors: Record<string, string> = {
+const priorityStyles: Record<string, string> = {
-  none: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
+  none: 'bg-gray-500/20 text-gray-400',
-  low: 'bg-green-500/10 text-green-500 border-green-500/20',
+  low: 'bg-green-500/20 text-green-400',
-  medium: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  medium: 'bg-yellow-500/20 text-yellow-400',
-  high: 'bg-red-500/10 text-red-500 border-red-500/20',
+  high: 'bg-red-500/20 text-red-400',
 };
 
 export default function TodoItem({ todo, onEdit }: TodoItemProps) {
@@ -31,6 +30,8 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['todos'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+      queryClient.invalidateQueries({ queryKey: ['upcoming'] });
       toast.success(todo.completed ? 'Todo marked incomplete' : 'Todo completed!');
     },
     onError: () => {
@@ -44,6 +45,8 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['todos'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+      queryClient.invalidateQueries({ queryKey: ['upcoming'] });
       toast.success('Todo deleted');
     },
     onError: () => {
@@ -51,44 +54,89 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
     },
   });
 
+  const dueDate = todo.due_date ? parseISO(todo.due_date) : null;
+  const isDueToday = dueDate ? isToday(dueDate) : false;
+  const isOverdue = dueDate && !todo.completed ? isPast(startOfDay(dueDate)) && !isDueToday : false;
+
   return (
-    <div className="flex items-center gap-3 rounded-lg border bg-card p-4 hover:bg-accent/5 transition-colors">
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-lg border bg-card p-4 transition-all duration-200',
+        'hover:shadow-lg hover:shadow-accent/5 hover:border-accent/20',
+        todo.completed && 'opacity-60'
+      )}
+    >
       <Checkbox
         checked={todo.completed}
         onChange={() => toggleMutation.mutate()}
         disabled={toggleMutation.isPending}
       />
+
       <div className="flex-1 min-w-0 cursor-pointer" onClick={() => onEdit(todo)}>
-        <h3
+        <div className="flex items-center gap-2">
-          className={cn(
+          <h3
-            'font-medium',
+            className={cn(
-            todo.completed && 'line-through text-muted-foreground'
+              'font-medium truncate',
+              todo.completed && 'line-through text-muted-foreground'
+            )}
+          >
+            {todo.title}
+          </h3>
+          <span
+            className={cn(
+              'text-[9px] px-1.5 py-0.5 rounded-full font-medium shrink-0',
+              priorityStyles[todo.priority]
+            )}
+          >
+            {todo.priority}
+          </span>
+          {todo.category && (
+            <span className="text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide bg-blue-500/15 text-blue-400 shrink-0">
+              {todo.category}
+            </span>
           )}
-        >
+        </div>
-          {todo.title}
+
-        </h3>
         {todo.description && (
           <p className="text-sm text-muted-foreground mt-1 line-clamp-1">{todo.description}</p>
         )}
-        <div className="flex items-center gap-2 mt-2">
+
-          <Badge className={priorityColors[todo.priority]}>{todo.priority}</Badge>
+        {dueDate && (
-          {todo.category && <Badge variant="outline">{todo.category}</Badge>}
+          <div
-          {todo.due_date && (
+            className={cn(
-            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              'flex items-center gap-1 mt-1.5 text-xs',
+              isOverdue
+                ? 'text-red-400'
+                : isDueToday
+                  ? 'text-yellow-400'
+                  : 'text-muted-foreground'
+            )}
+          >
+            {isOverdue ? (
+              <AlertCircle className="h-3 w-3" />
+            ) : (
               <Calendar className="h-3 w-3" />
-              {format(new Date(todo.due_date), 'MMM d, yyyy')}
+            )}
-            </div>
+            {isOverdue ? 'Overdue — ' : isDueToday ? 'Today — ' : ''}
-          )}
+            {format(dueDate, 'MMM d, yyyy')}
-        </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-1 shrink-0">
+        <Button variant="ghost" size="icon" onClick={() => onEdit(todo)} className="h-8 w-8">
+          <Pencil className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => deleteMutation.mutate()}
+          disabled={deleteMutation.isPending}
+          className="h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
       </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={() => deleteMutation.mutate()}
-        disabled={deleteMutation.isPending}
-      >
-        <Trash2 className="h-4 w-4" />
-      </Button>
     </div>
   );
 }

frontend/src/components/todos/TodoList.tsx

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { CheckSquare } from 'lucide-react';
+import { parseISO, isToday, isPast, startOfDay } from 'date-fns';
 import type { Todo } from '@/types';
 import { EmptyState } from '@/components/ui/empty-state';
 import TodoItem from './TodoItem';
@@ -6,23 +8,93 @@ import TodoItem from './TodoItem';
 interface TodoListProps {
   todos: Todo[];
   onEdit: (todo: Todo) => void;
+  onAdd: () => void;
 }
 
-export default function TodoList({ todos, onEdit }: TodoListProps) {
+interface TodoGroup {
+  key: string;
+  label: string;
+  todos: Todo[];
+}
+
+export default function TodoList({ todos, onEdit, onAdd }: TodoListProps) {
+  const groups = useMemo(() => {
+    const overdue: Todo[] = [];
+    const today: Todo[] = [];
+    const upcoming: Todo[] = [];
+    const noDueDate: Todo[] = [];
+    const completed: Todo[] = [];
+
+    for (const todo of todos) {
+      if (todo.completed) {
+        completed.push(todo);
+        continue;
+      }
+
+      if (!todo.due_date) {
+        noDueDate.push(todo);
+        continue;
+      }
+
+      const dueDate = parseISO(todo.due_date);
+      if (isToday(dueDate)) {
+        today.push(todo);
+      } else if (isPast(startOfDay(dueDate))) {
+        overdue.push(todo);
+      } else {
+        upcoming.push(todo);
+      }
+    }
+
+    const result: TodoGroup[] = [];
+    if (overdue.length > 0) result.push({ key: 'overdue', label: 'Overdue', todos: overdue });
+    if (today.length > 0) result.push({ key: 'today', label: 'Today', todos: today });
+    if (upcoming.length > 0) result.push({ key: 'upcoming', label: 'Upcoming', todos: upcoming });
+    if (noDueDate.length > 0)
+      result.push({ key: 'no-date', label: 'No Due Date', todos: noDueDate });
+    if (completed.length > 0)
+      result.push({ key: 'completed', label: 'Completed', todos: completed });
+
+    return result;
+  }, [todos]);
+
   if (todos.length === 0) {
     return (
       <EmptyState
         icon={CheckSquare}
         title="No todos yet"
         description="Create your first todo to start tracking tasks and staying organised."
+        actionLabel="Add Todo"
+        onAction={onAdd}
       />
     );
   }
 
+  // If only one group, skip headers
+  if (groups.length === 1) {
+    return (
+      <div className="space-y-2">
+        {groups[0].todos.map((todo) => (
+          <TodoItem key={todo.id} todo={todo} onEdit={onEdit} />
+        ))}
+      </div>
+    );
+  }
+
   return (
-    <div className="space-y-2">
+    <div className="space-y-5">
-      {todos.map((todo) => (
+      {groups.map((group) => (
-        <TodoItem key={todo.id} todo={todo} onEdit={onEdit} />
+        <div key={group.key}>
+          <h3 className="text-xs uppercase tracking-wider text-muted-foreground mb-2 px-1">
+            {group.label}
+            <span className="ml-1.5 tabular-nums">({group.todos.length})</span>
+          </h3>
+          <div className="space-y-2">
+            {group.todos.map((todo) => (
+              <TodoItem key={todo.id} todo={todo} onEdit={onEdit} />
+            ))}
+          </div>
+        </div>
       ))}
     </div>
   );

frontend/src/components/todos/TodosPage.tsx

@@ -1,17 +1,24 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
-import { Plus } from 'lucide-react';
+import { Plus, CheckSquare, CheckCircle2, AlertCircle, Search, ChevronDown } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import type { Todo } from '@/types';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Select } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { ListSkeleton } from '@/components/ui/skeleton';
 import TodoList from './TodoList';
 import TodoForm from './TodoForm';
 
+const priorityFilters = [
+  { value: '', label: 'All' },
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+] as const;
+
 export default function TodosPage() {
   const [showForm, setShowForm] = useState(false);
   const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
@@ -30,15 +37,33 @@ export default function TodosPage() {
     },
   });
 
+  const categories = useMemo(() => {
+    const cats = new Set<string>();
+    todos.forEach((t) => {
+      if (t.category) cats.add(t.category);
+    });
+    return Array.from(cats).sort();
+  }, [todos]);
+
   const filteredTodos = todos.filter((todo) => {
     if (filters.priority && todo.priority !== filters.priority) return false;
-    if (filters.category && todo.category?.toLowerCase() !== filters.category.toLowerCase()) return false;
+    if (filters.category && todo.category?.toLowerCase() !== filters.category.toLowerCase())
+      return false;
     if (!filters.showCompleted && todo.completed) return false;
     if (filters.search && !todo.title.toLowerCase().includes(filters.search.toLowerCase()))
       return false;
     return true;
   });
 
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+  const totalCount = todos.filter((t) => !t.completed).length;
+  const completedCount = todos.filter((t) => t.completed).length;
+  const overdueCount = todos.filter(
+    (t) => !t.completed && t.due_date && t.due_date < todayStr
+  ).length;
+
   const handleEdit = (todo: Todo) => {
     setEditingTodo(todo);
     setShowForm(true);
@@ -51,56 +76,132 @@ export default function TodosPage() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="border-b bg-card px-6 py-4">
+      {/* Header */}
-        <div className="flex items-center justify-between mb-4">
+      <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
-          <h1 className="text-3xl font-bold">Todos</h1>
+        <h1 className="font-heading text-2xl font-bold tracking-tight">Todos</h1>
-          <Button onClick={() => setShowForm(true)}>
+
-            <Plus className="mr-2 h-4 w-4" />
+        <div className="flex items-center rounded-md border border-border overflow-hidden ml-4">
-            Add Todo
+          {priorityFilters.map((pf) => (
-          </Button>
+            <button
+              key={pf.value}
+              onClick={() => setFilters({ ...filters, priority: pf.value })}
+              className={`px-3 py-1.5 text-sm font-medium transition-colors duration-150 ${
+                filters.priority === pf.value
+                  ? 'bg-accent/15 text-accent'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
+              }`}
+              style={{
+                backgroundColor:
+                  filters.priority === pf.value ? 'hsl(var(--accent-color) / 0.15)' : undefined,
+                color: filters.priority === pf.value ? 'hsl(var(--accent-color))' : undefined,
+              }}
+            >
+              {pf.label}
+            </button>
+          ))}
         </div>
 
-        <div className="flex flex-wrap gap-4">
+        <div className="relative ml-2">
-          <div className="flex-1 min-w-[200px]">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              placeholder="Search todos..."
-              value={filters.search}
-              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
-            />
-          </div>
-          <Select
-            value={filters.priority}
-            onChange={(e) => setFilters({ ...filters, priority: e.target.value })}
-          >
-            <option value="">All Priorities</option>
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          </Select>
           <Input
-            placeholder="Filter by category..."
+            placeholder="Search..."
+            value={filters.search}
+            onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+            className="w-52 h-8 pl-8 text-sm"
+          />
+        </div>
+
+        <div className="relative">
+          <select
             value={filters.category}
             onChange={(e) => setFilters({ ...filters, category: e.target.value })}
-            className="w-48"
+            className="h-8 rounded-md border border-input bg-background px-3 pr-8 text-sm text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 appearance-none cursor-pointer"
-          />
+          >
-          <div className="flex items-center gap-2">
+            <option value="">All Categories</option>
-            <Checkbox
+            {categories.map((cat) => (
-              id="show-completed"
+              <option key={cat} value={cat}>
-              checked={filters.showCompleted}
+                {cat}
-              onChange={(e) =>
+              </option>
-                setFilters({ ...filters, showCompleted: (e.target as HTMLInputElement).checked })
+            ))}
-              }
+          </select>
-            />
+          <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-            <Label htmlFor="show-completed">Show completed</Label>
-          </div>
         </div>
+
+        <div className="flex items-center gap-1.5">
+          <Checkbox
+            id="show-completed"
+            checked={filters.showCompleted}
+            onChange={(e) =>
+              setFilters({ ...filters, showCompleted: (e.target as HTMLInputElement).checked })
+            }
+          />
+          <Label htmlFor="show-completed" className="text-xs text-muted-foreground cursor-pointer">
+            Completed
+          </Label>
+        </div>
+
+        <div className="flex-1" />
+
+        <Button onClick={() => setShowForm(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Add Todo
+        </Button>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex-1 overflow-y-auto px-6 py-5">
+        {/* Summary stats */}
+        {!isLoading && todos.length > 0 && (
+          <div className="grid gap-2.5 grid-cols-3 mb-5">
+            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+              <CardContent className="p-4 flex items-center gap-3">
+                <div className="p-1.5 rounded-md bg-blue-500/10">
+                  <CheckSquare className="h-4 w-4 text-blue-400" />
+                </div>
+                <div>
+                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                    Open
+                  </p>
+                  <p className="font-heading text-xl font-bold tabular-nums">{totalCount}</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+              <CardContent className="p-4 flex items-center gap-3">
+                <div className="p-1.5 rounded-md bg-green-500/10">
+                  <CheckCircle2 className="h-4 w-4 text-green-400" />
+                </div>
+                <div>
+                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                    Completed
+                  </p>
+                  <p className="font-heading text-xl font-bold tabular-nums">{completedCount}</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
+              <CardContent className="p-4 flex items-center gap-3">
+                <div className="p-1.5 rounded-md bg-red-500/10">
+                  <AlertCircle className="h-4 w-4 text-red-400" />
+                </div>
+                <div>
+                  <p className="text-[10px] tracking-wider uppercase text-muted-foreground">
+                    Overdue
+                  </p>
+                  <p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
         {isLoading ? (
           <ListSkeleton rows={6} />
         ) : (
-          <TodoList todos={filteredTodos} onEdit={handleEdit} />
+          <TodoList
+            todos={filteredTodos}
+            onEdit={handleEdit}
+            onAdd={() => setShowForm(true)}
+          />
         )}
       </div>