How to Integrate Bolt.new with Toggl Track

1# .env — add to project root in Bolt
2# Found at: toggl.com → Profile Settings → scroll to bottom → API Token
3TOGGL_API_TOKEN=your_32_char_api_token_here
4# Found in URL: toggl.com/app/workspaces/{THIS_NUMBER}/...
5TOGGL_WORKSPACE_ID=12345678
6# Optional: hourly rate for billing calculations (cents per hour)
7TOGGL_HOURLY_RATE_CENTS=15000

1// lib/toggl-client.ts
2const TRACK_BASE = 'https://api.track.toggl.com/api/v9';
3const REPORTS_BASE = 'https://api.track.toggl.com/reports/api/v3';
4
5function getAuthHeader(): string {
6  const token = process.env.TOGGL_API_TOKEN;
7  if (!token) throw new Error('TOGGL_API_TOKEN not configured');
8  return 'Basic ' + Buffer.from(`${token}:api_token`).toString('base64');
9}
10
11async function togglRequest<T>(url: string, options: RequestInit = {}): Promise<T> {
12  const res = await fetch(url, {
13    ...options,
14    headers: {
15      Authorization: getAuthHeader(),
16      'Content-Type': 'application/json',
17      ...options.headers,
18    },
19  });
20
21  if (res.status === 404) return null as T;
22
23  if (!res.ok) {
24    const text = await res.text();
25    throw new Error(`Toggl API error ${res.status}: ${text}`);
26  }
27
28  return res.json();
29}
30
31export interface TogglTimeEntry {
32  id: number;
33  description?: string;
34  project_id?: number;
35  start: string;
36  stop?: string;
37  duration: number; // negative = still running
38  workspace_id: number;
39  tags?: string[];
40}
41
42export interface TogglProject {
43  id: number;
44  name: string;
45  color: string;
46  client_id?: number;
47  active: boolean;
48}
49
50export function getDurationSeconds(entry: TogglTimeEntry): number {
51  if (entry.duration >= 0) return entry.duration;
52  // Running timer: duration is negative Unix start timestamp
53  return Math.floor(Date.now() / 1000) - Math.abs(entry.duration);
54}
55
56export function formatDuration(seconds: number): string {
57  const h = Math.floor(seconds / 3600);
58  const m = Math.floor((seconds % 3600) / 60);
59  return h > 0 ? `${h}h ${m}m` : `${m}m`;
60}
61
62export async function getMe() {
63  return togglRequest<{ id: number; email: string; fullname: string; default_workspace_id: number }>(
64    `${TRACK_BASE}/me`
65  );
66}
67
68export async function getCurrentTimer(): Promise<TogglTimeEntry | null> {
69  return togglRequest<TogglTimeEntry | null>(`${TRACK_BASE}/me/time_entries/current`);
70}
71
72export async function getTimeEntries(since?: string, before?: string): Promise<TogglTimeEntry[]> {
73  const params = new URLSearchParams();
74  if (since) params.set('since', since);
75  if (before) params.set('before', before);
76  const query = params.toString() ? `?${params}` : '';
77  return togglRequest<TogglTimeEntry[]>(`${TRACK_BASE}/me/time_entries${query}`);
78}
79
80export async function getProjects(): Promise<TogglProject[]> {
81  return togglRequest<TogglProject[]>(`${TRACK_BASE}/me/projects`);
82}
83
84export async function getSummaryReport(
85  workspaceId: number,
86  startDate: string,
87  endDate: string
88) {
89  return togglRequest<{ groups: Array<{ id: number; seconds: number; sub_groups: Array<{ id: number; seconds: number }> }> }>(
90    `${REPORTS_BASE}/workspace/${workspaceId}/summary/time_entries`,
91    {
92      method: 'POST',
93      body: JSON.stringify({
94        start_date: startDate,
95        end_date: endDate,
96        grouping: 'projects',
97        sub_grouping: 'users',
98      }),
99    }
100  );
101}

1// app/api/toggl/dashboard/route.ts
2import { NextResponse } from 'next/server';
3import {
4  getMe,
5  getTimeEntries,
6  getCurrentTimer,
7  getProjects,
8  getSummaryReport,
9  getDurationSeconds,
10} from '@/lib/toggl-client';
11
12export async function GET() {
13  try {
14    const today = new Date();
15    const weekAgo = new Date(today);
16    weekAgo.setDate(today.getDate() - 7);
17
18    const todayStr = today.toISOString().split('T')[0];
19    const weekAgoStr = weekAgo.toISOString().split('T')[0];
20
21    // Fetch all data in parallel
22    const [me, todayEntries, currentTimer, projects, weekSummary] = await Promise.all([
23      getMe(),
24      getTimeEntries(todayStr),
25      getCurrentTimer(),
26      getProjects(),
27      getSummaryReport(
28        parseInt(process.env.TOGGL_WORKSPACE_ID!),
29        weekAgoStr,
30        todayStr
31      ),
32    ]);
33
34    // Calculate today's total
35    const todaySeconds = todayEntries.reduce(
36      (sum, entry) => sum + getDurationSeconds(entry),
37      0
38    );
39
40    // Build project map for name/color lookups
41    const projectMap = Object.fromEntries(
42      projects.map(p => [p.id, { name: p.name, color: p.color }])
43    );
44
45    // Format weekly summary with project names
46    const projectBreakdown = (weekSummary?.groups || []).map(group => ({
47      projectId: group.id,
48      projectName: projectMap[group.id]?.name || 'No project',
49      color: projectMap[group.id]?.color || '#888888',
50      totalSeconds: group.seconds,
51      hoursFormatted: `${Math.floor(group.seconds / 3600)}h ${Math.floor((group.seconds % 3600) / 60)}m`,
52    }));
53
54    return NextResponse.json({
55      user: { name: me.fullname, email: me.email },
56      today: {
57        totalSeconds: todaySeconds,
58        entryCount: todayEntries.length,
59      },
60      currentTimer: currentTimer
61        ? {
62            description: currentTimer.description || 'No description',
63            projectName: currentTimer.project_id ? projectMap[currentTimer.project_id]?.name : null,
64            startedAt: currentTimer.start,
65            elapsedSeconds: getDurationSeconds(currentTimer),
66          }
67        : null,
68      projectBreakdown,
69    });
70  } catch (error) {
71    const message = error instanceof Error ? error.message : 'Failed to load dashboard';
72    return NextResponse.json({ error: message }, { status: 500 });
73  }
74}

1// app/api/toggl/time-entries/route.ts
2import { NextResponse } from 'next/server';
3
4export async function POST(request: Request) {
5  try {
6    const { description, project_id } = await request.json();
7    const workspaceId = process.env.TOGGL_WORKSPACE_ID;
8    const token = process.env.TOGGL_API_TOKEN;
9
10    const authHeader = 'Basic ' + Buffer.from(`${token}:api_token`).toString('base64');
11
12    const body = {
13      description: description || '',
14      project_id: project_id || null,
15      start: new Date().toISOString(),
16      duration: -1, // -1 means running timer
17      workspace_id: parseInt(workspaceId!),
18      created_with: 'my-bolt-app',
19    };
20
21    const res = await fetch(
22      `https://api.track.toggl.com/api/v9/workspaces/${workspaceId}/time_entries`,
23      {
24        method: 'POST',
25        headers: {
26          Authorization: authHeader,
27          'Content-Type': 'application/json',
28        },
29        body: JSON.stringify(body),
30      }
31    );
32
33    if (!res.ok) {
34      const error = await res.text();
35      return NextResponse.json({ error }, { status: res.status });
36    }
37
38    const entry = await res.json();
39    return NextResponse.json({ entry }, { status: 201 });
40  } catch (error) {
41    const message = error instanceof Error ? error.message : 'Failed to create time entry';
42    return NextResponse.json({ error: message }, { status: 500 });
43  }
44}
45
46// app/api/toggl/time-entries/stop/route.ts
47import { NextResponse } from 'next/server';
48
49export async function POST() {
50  try {
51    const workspaceId = process.env.TOGGL_WORKSPACE_ID;
52    const token = process.env.TOGGL_API_TOKEN;
53    const authHeader = 'Basic ' + Buffer.from(`${token}:api_token`).toString('base64');
54
55    // First get the current timer ID
56    const currentRes = await fetch(
57      'https://api.track.toggl.com/api/v9/me/time_entries/current',
58      { headers: { Authorization: authHeader } }
59    );
60    const current = await currentRes.json();
61
62    if (!current?.id) {
63      return NextResponse.json({ error: 'No running timer' }, { status: 404 });
64    }
65
66    // Stop the timer
67    const stopRes = await fetch(
68      `https://api.track.toggl.com/api/v9/workspaces/${workspaceId}/time_entries/${current.id}/stop`,
69      { method: 'PATCH', headers: { Authorization: authHeader } }
70    );
71
72    const stopped = await stopRes.json();
73    return NextResponse.json({ entry: stopped });
74  } catch (error) {
75    const message = error instanceof Error ? error.message : 'Failed to stop timer';
76    return NextResponse.json({ error: message }, { status: 500 });
77  }
78}