How to Build a Productivity App with Lovable

1Build a unified productivity app. Create these Supabase tables:
2
3- projects: id, user_id, name, color (hex), description, is_archived (bool default false), created_at
4- tasks: id, user_id, project_id (FK projects nullable), title, description, status (todo|in_progress|done), priority (low|medium|high|urgent), due_date (date nullable), completed_at (timestamptz nullable), created_at
5- notes: id, user_id, task_id (FK tasks nullable), project_id (FK projects nullable), title, content (text), tags (text array), created_at, updated_at
6- time_entries: id, user_id, task_id (FK tasks nullable), project_id (FK projects nullable), session_type (work|short_break|long_break), duration_minutes (int), started_at (timestamptz), completed_at (timestamptz)
7- daily_plan: id, user_id, task_id (FK tasks), plan_date (date), time_slot (int, hour 0-23), created_at, UNIQUE(user_id, task_id, plan_date)
8
9Create a view weekly_time_summary: user_id, project_id, project_name, week_start (date, Monday), total_minutes — groups time_entries by user+project+week.
10
11RLS: all tables require user_id = auth.uid() for all operations. Enable Realtime on tasks and time_entries.

1Build the Tasks tab content at src/components/productivity/TasksMode.tsx:
2
31. Layout: sidebar with project list (Cards, each showing project color + name + task count), main area with task list
42. Task list:
5   - Group by status: To Do, In Progress, Done (three collapsible sections)
6   - Each task row: checkbox (clicking sets status=done and completed_at=now), priority Badge (low=gray, medium=blue, high=orange, urgent=red), title, project Badge, due date (red if overdue), a Timer Button that opens the Pomodoro timer pre-linked to this task
7   - Inline edit: clicking the title opens an edit Popover with all task fields
83. Quick-add Input at top: type task title and press Enter to create a task in the selected project with status=todo
94. Filter bar: status Select, priority Select, project Select, due date range
105. Task detail Sheet (slides in from right when clicking a task): shows full description, linked notes count, total time logged, edit all fields
116. Sort options: due date, priority, created date, manual drag (update sort_order column)

1// src/components/productivity/PomodoroTimer.tsx
2import { useState, useEffect, useCallback } from 'react'
3import { Button } from '@/components/ui/button'
4import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
5import { supabase } from '@/integrations/supabase/client'
6import { useAuth } from '@/hooks/useAuth'
7
8const SESSIONS = {
9  work: 25 * 60,
10  short_break: 5 * 60,
11  long_break: 15 * 60,
12} as const
13
14type SessionType = keyof typeof SESSIONS
15
16interface Props {
17  defaultTaskId?: string
18}
19
20export function PomodoroTimer({ defaultTaskId }: Props) {
21  const { user } = useAuth()
22  const [sessionType, setSessionType] = useState<SessionType>('work')
23  const [timeLeft, setTimeLeft] = useState(SESSIONS.work)
24  const [isRunning, setIsRunning] = useState(false)
25  const [startedAt, setStartedAt] = useState<string | null>(null)
26  const [selectedTaskId, setSelectedTaskId] = useState(defaultTaskId ?? null)
27
28  useEffect(() => {
29    setTimeLeft(SESSIONS[sessionType])
30    setIsRunning(false)
31  }, [sessionType])
32
33  const logSession = useCallback(async () => {
34    if (!user || !startedAt) return
35    await supabase.from('time_entries').insert({
36      user_id: user.id,
37      task_id: selectedTaskId,
38      session_type: sessionType,
39      duration_minutes: SESSIONS[sessionType] / 60,
40      started_at: startedAt,
41      completed_at: new Date().toISOString(),
42    })
43  }, [user, startedAt, selectedTaskId, sessionType])
44
45  useEffect(() => {
46    if (!isRunning) return
47    if (timeLeft === 0) {
48      setIsRunning(false)
49      logSession()
50      return
51    }
52    const interval = setInterval(() => setTimeLeft((t) => t - 1), 1000)
53    return () => clearInterval(interval)
54  }, [isRunning, timeLeft, logSession])
55
56  const minutes = Math.floor(timeLeft / 60).toString().padStart(2, '0')
57  const seconds = (timeLeft % 60).toString().padStart(2, '0')
58  const progress = ((SESSIONS[sessionType] - timeLeft) / SESSIONS[sessionType]) * 100
59
60  return (
61    <div className="flex flex-col items-center gap-6 p-8">
62      <div className="relative w-48 h-48">
63        <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
64          <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="4" className="text-muted" />
65          <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="4"
66            className="text-primary transition-all duration-1000"
67            strokeDasharray={`${2 * Math.PI * 45}`}
68            strokeDashoffset={`${2 * Math.PI * 45 * (1 - progress / 100)}`} />
69        </svg>
70        <div className="absolute inset-0 flex items-center justify-center">
71          <span className="text-4xl font-mono font-bold">{minutes}:{seconds}</span>
72        </div>
73      </div>
74      <div className="flex gap-2">
75        {(['work', 'short_break', 'long_break'] as SessionType[]).map((s) => (
76          <Button key={s} variant={sessionType === s ? 'default' : 'outline'} size="sm" onClick={() => setSessionType(s)}>
77            {s === 'work' ? 'Focus' : s === 'short_break' ? 'Short Break' : 'Long Break'}
78          </Button>
79        ))}
80      </div>
81      <Button size="lg" onClick={() => { if (!isRunning) setStartedAt(new Date().toISOString()); setIsRunning(!isRunning) }}>
82        {isRunning ? 'Pause' : timeLeft === SESSIONS[sessionType] ? 'Start' : 'Resume'}
83      </Button>
84    </div>
85  )
86}

1Build the Planner tab at src/components/productivity/DailyPlanner.tsx:
2
31. Header: today's date in large text, day navigation (< and > arrows to change the plan_date)
42. Left column: 'Unscheduled Today' — fetches tasks WHERE due_date = plan_date AND task not in daily_plan for this date. Shows as a scrollable list of draggable task chips.
53. Right area: time grid from 6 AM to 10 PM in 1-hour slots
6   - Each slot is a drop zone. Dropping a task chip on a slot calls supabase.from('daily_plan').upsert({ user_id, task_id, plan_date, time_slot: hour })
7   - Slots that have tasks show the task title as a colored chip (using project color)
8   - Clicking a chip in the grid removes it from the slot (deletes from daily_plan)
94. Drag and drop: use HTML5 drag and drop API (draggable attribute + onDragStart/onDrop handlers) — no external library needed
105. 'Schedule remaining' button: assigns all unscheduled tasks to the next available slot starting from current hour
116. Show current time indicator: a red horizontal line on the current hour slot

1Build the Notes tab at src/components/productivity/NotesMode.tsx:
2
31. Three-panel layout (desktop): note list (left sidebar), note editor (center), linked items (right panel)
42. Note list:
5   - Search Input that filters via Supabase full-text search: .textSearch('content', searchTerm)
6   - Tag filter pills using Badge components
7   - Each list item: note title (first line of content), updated_at relative time, linked task count Badge
8   - 'New Note' Button at top creates a blank note
93. Note editor:
10   - Title Input (auto-saves on blur)
11   - Textarea for content (auto-saves 2 seconds after last keystroke using debounce)
12   - Tags Input: type a tag and press Enter to add, click x on Badge to remove
134. Linked items panel:
14   - 'Link to Task' Combobox: search tasks and select one to link (sets task_id on this note)
15   - 'Link to Project' Select: sets project_id on this note
16   - Shows linked task title with a link to open the task in the Tasks tab
175. Auto-save indicator: shows 'Saving...' then 'Saved' in the top-right of the editor