How to Integrate Time Doctor with V0

Open V0 at v0.dev and describe the remote team monitoring dashboard you want to build. Time Doctor integrations typically focus on one of three views: a live team status board (who is active right now), a daily or weekly time summary report, or a productivity analytics dashboard with trend charts. Be specific with V0 about the data fields you will receive from Time Doctor: user name, total work time in seconds (convert to hours in your API route before returning), productivity score as a percentage, project names, and the time period being summarized. Tell V0 the exact API route paths your components will call (/api/timedoctor/users for team member lists, /api/timedoctor/reports for time data) and the expected response shapes. For dashboards with charts, mention that you want to use Recharts (which V0 uses by default for data visualization) and describe the chart type and data encoding explicitly. V0 generates the component with Tailwind CSS and proper loading skeletons for data tables automatically. Include descriptions of how status indicators should look — colored dots for active/inactive, colored badges for productivity score ranges. After generating the dashboard, push to GitHub via V0's Git panel to trigger a Vercel preview deployment.

Time Doctor uses OAuth2 for its v2 API at api2.timedoctor.com. To get an access token: log in to your Time Doctor account, go to Settings → Company → Integrations → API Access, and generate an access token. Alternatively, use the OAuth2 password grant flow by POSTing to https://webapi.timedoctor.com/oauth/v2/token with your Time Doctor email, password, client_id (1_3bc3-public), and grant_type=password — this returns an access_token and refresh_token. Store the access_token as TIMEDOCTOR_ACCESS_TOKEN in your .env.local file for local testing. The v2 API base URL is https://webapi.timedoctor.com/v1.1 (note: the 'v1.1' path is used for what Time Doctor calls their v2 API in current documentation). Key endpoints include: /companies (get your company ID), /companies/{companyId}/users (team member list), /companies/{companyId}/worklogs?start_date={date}&end_date={date} (time logs), and /companies/{companyId}/productivity (productivity scores). The company ID is included in the /companies response and must be stored as TIMEDOCTOR_COMPANY_ID. Create a unified route that handles different report types based on a query parameter to keep the route structure clean.

1// app/api/timedoctor/team-summary/route.ts
2import { NextResponse } from 'next/server';
3
4const TD_API_BASE = 'https://webapi.timedoctor.com/v1.1';
5
6function getTDHeaders(): Record<string, string> {
7  return {
8    Authorization: `Bearer ${process.env.TIMEDOCTOR_ACCESS_TOKEN}`,
9    'Content-Type': 'application/json',
10  };
11}
12
13function secondsToHoursMinutes(seconds: number): string {
14  const hours = Math.floor(seconds / 3600);
15  const minutes = Math.floor((seconds % 3600) / 60);
16  return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
17}
18
19export async function GET() {
20  const token = process.env.TIMEDOCTOR_ACCESS_TOKEN;
21  const companyId = process.env.TIMEDOCTOR_COMPANY_ID;
22
23  if (!token || !companyId) {
24    return NextResponse.json(
25      { error: 'Time Doctor is not configured — set TIMEDOCTOR_ACCESS_TOKEN and TIMEDOCTOR_COMPANY_ID' },
26      { status: 500 }
27    );
28  }
29
30  try {
31    const today = new Date().toISOString().split('T')[0];
32    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
33      .toISOString()
34      .split('T')[0];
35
36    // Fetch users and work logs in parallel
37    const [usersResponse, worklogsResponse] = await Promise.all([
38      fetch(`${TD_API_BASE}/companies/${companyId}/users`, {
39        headers: getTDHeaders(),
40      }),
41      fetch(
42        `${TD_API_BASE}/companies/${companyId}/worklogs?start_date=${weekAgo}&end_date=${today}&detail=project`,
43        { headers: getTDHeaders() }
44      ),
45    ]);
46
47    if (!usersResponse.ok || !worklogsResponse.ok) {
48      throw new Error('Failed to fetch Time Doctor data');
49    }
50
51    const usersData = await usersResponse.json();
52    const worklogsData = await worklogsResponse.json();
53
54    const users = usersData.users || [];
55    const worklogs = worklogsData.worklogs?.data || [];
56
57    // Aggregate time by user
58    const userTimeMap: Record<string, { today: number; week: number }> = {};
59    const todayStr = today;
60
61    for (const log of worklogs) {
62      const userId = String(log.userId);
63      if (!userTimeMap[userId]) userTimeMap[userId] = { today: 0, week: 0 };
64      userTimeMap[userId].week += log.time || 0;
65      if (log.date === todayStr) {
66        userTimeMap[userId].today += log.time || 0;
67      }
68    }
69
70    const teamMembers = users.map((user: any) => {
71      const times = userTimeMap[String(user.id)] || { today: 0, week: 0 };
72      return {
73        id: user.id,
74        name: user.fullName || user.name,
75        email: user.email,
76        todayHours: secondsToHoursMinutes(times.today),
77        weekHours: secondsToHoursMinutes(times.week),
78        isActive: user.online || false,
79        lastActive: user.lastActivity || null,
80      };
81    });
82
83    const totalWeekSeconds = Object.values(userTimeMap).reduce(
84      (sum, t) => sum + t.week,
85      0
86    );
87
88    return NextResponse.json({
89      teamMembers,
90      summary: {
91        totalWeekHours: secondsToHoursMinutes(totalWeekSeconds),
92        activeNow: teamMembers.filter((m: any) => m.isActive).length,
93        totalMembers: teamMembers.length,
94      },
95    });
96  } catch (error) {
97    const message = error instanceof Error ? error.message : 'Unknown error';
98    console.error('Time Doctor API error:', message);
99    return NextResponse.json({ error: message }, { status: 500 });
100  }
101}

Set up Time Doctor credentials in Vercel and complete the production deployment. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add TIMEDOCTOR_ACCESS_TOKEN with your Time Doctor OAuth2 access token obtained in the previous step. Add TIMEDOCTOR_COMPANY_ID with your company's numeric ID from the Time Doctor API — retrieve it by calling GET https://webapi.timedoctor.com/v1.1/companies with your access token; the company ID is in the response. Neither variable should have the NEXT_PUBLIC_ prefix — both are server-side only. Set variables for Production, Preview, and Development scopes. For local development, add the same variables to .env.local and run npm run dev to test the dashboard with live Time Doctor data before deploying. One important consideration: Time Doctor access tokens expire and need to be refreshed. If you get consistent 401 errors after initial setup, your access token may have expired. Re-run the OAuth flow (POST to the token endpoint with your credentials) to generate a fresh token and update the Vercel environment variable. After saving variables in Vercel, trigger a redeployment from the Deployments tab and test the live dashboard. For teams requiring ongoing token refresh automation, RapidDev can help implement a refresh token rotation system that updates Vercel environment variables automatically when tokens expire.