How to Integrate Teamwork with V0

Use V0 to generate your project management dashboard UI before connecting it to real data. Describe the specific views you need — task tables, project cards, time tracking summaries — with TypeScript interfaces that match the Teamwork API response shapes. For a standard agency PM dashboard, you'll typically want three views: an all-projects overview showing project health and milestone progress, a task detail view with filtering and sorting, and a time entries report. Ask V0 to generate these as separate route components that share a navigation sidebar. Describe the data shapes explicitly in your V0 prompt so it generates correct TypeScript interfaces. A Teamwork task has: `id`, `name`, `status` (new/inprogress/completed), `assignedTo` array, `dueDate`, `priority` (none/low/medium/high), `estimatedTime`, and `loggedTime`. A project has `id`, `name`, `status`, `startDate`, `endDate`, and `completedTaskCount`/`totalTaskCount`. Ask V0 to include visual indicators for task priority (colored dots or badges), overdue status (red date badge when past due date), and project completion percentage (progress bar). These visual elements make PM dashboards useful at a glance without requiring users to read every number.

Create a Next.js API route at `app/api/teamwork/route.ts` that authenticates to Teamwork's v3 REST API using HTTP Basic auth. The authentication format is straightforward: encode `{YOUR_API_TOKEN}:x` (literal 'x' as password) in Base64 and pass it as the Authorization header. Teamwork's API v3 base URL format is `https://{your-site}.teamwork.com/projects/api/v3/` — replace `{your-site}` with your Teamwork subdomain. Store this in an environment variable as `TEAMWORK_SITE` (just the subdomain, e.g., 'yourcompany'). Key Teamwork v3 API endpoints: - `GET /projects.json` — list all projects with stats - `GET /tasks.json` — list tasks (supports `projectId`, `assignedTo`, `status` filters) - `GET /projects/{id}/tasks.json` — tasks for a specific project - `GET /time/entries.json` — time entries (supports `startDate`, `endDate`, `projectId`) - `GET /projects/{id}/milestones.json` — milestones for a project Teamwork's API returns paginated results with a default page size of 50. Include `page` and `pageSize` parameters in your API route to support pagination. The response includes a `meta.page` object with `pageOffset`, `pageSize`, and `count` fields. For your dashboard's main query patterns, the most useful endpoints are tasks with assigned-to and project filters for the task board view, and time entries with date range filters for the reporting view.

1// app/api/teamwork/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SITE = process.env.TEAMWORK_SITE!; // e.g., 'yourcompany'
5const TOKEN = process.env.TEAMWORK_API_TOKEN!;
6const BASE_URL = `https://${SITE}.teamwork.com/projects/api/v3`;
7
8function getAuthHeader() {
9  return 'Basic ' + Buffer.from(`${TOKEN}:x`).toString('base64');
10}
11
12async function teamworkFetch(endpoint: string, params?: Record<string, string>) {
13  const url = new URL(`${BASE_URL}${endpoint}`);
14  if (params) Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
15
16  const res = await fetch(url.toString(), {
17    headers: {
18      Authorization: getAuthHeader(),
19      'Content-Type': 'application/json',
20    },
21    next: { revalidate: 60 }, // cache for 1 minute
22  });
23
24  if (!res.ok) throw new Error(`Teamwork API error: ${res.status}`);
25  return res.json();
26}
27
28export async function GET(request: NextRequest) {
29  const { searchParams } = new URL(request.url);
30  const resource = searchParams.get('resource');
31  const projectId = searchParams.get('projectId') || '';
32  const startDate = searchParams.get('startDate') || '';
33  const endDate = searchParams.get('endDate') || '';
34  const page = searchParams.get('page') || '1';
35
36  try {
37    switch (resource) {
38      case 'projects': {
39        const data = await teamworkFetch('/projects.json', {
40          includeStats: 'true',
41          page,
42          pageSize: '50',
43        });
44        return NextResponse.json(data);
45      }
46      case 'tasks': {
47        const params: Record<string, string> = { page, pageSize: '100' };
48        if (projectId) params.projectId = projectId;
49        const data = await teamworkFetch('/tasks.json', params);
50        return NextResponse.json(data);
51      }
52      case 'time': {
53        const params: Record<string, string> = {};
54        if (projectId) params.projectId = projectId;
55        if (startDate) params.startDate = startDate;
56        if (endDate) params.endDate = endDate;
57        const data = await teamworkFetch('/time/entries.json', params);
58        return NextResponse.json(data);
59      }
60      default:
61        return NextResponse.json({ error: 'resource must be: projects, tasks, or time' }, { status: 400 });
62    }
63  } catch (err: any) {
64    return NextResponse.json({ error: err.message }, { status: 500 });
65  }
66}

Open your Vercel project dashboard and navigate to Settings → Environment Variables. Add two required variables. First, add `TEAMWORK_API_TOKEN` — get this from your Teamwork account by going to your profile picture in the top-right corner → Edit my Details → API & Mobile → scroll down to 'Your API Token'. Click to reveal the token and copy it. This is a long alphanumeric string. Set this as a server-only variable (no NEXT_PUBLIC_ prefix). Second, add `TEAMWORK_SITE` — this is your Teamwork subdomain. If your Teamwork URL is `yourcompany.teamwork.com`, the value is `yourcompany`. If you're using a custom domain or Teamwork Desk, check with your Teamwork administrator for the correct subdomain value. Both variables should be set for the Production environment. If you want to test against a Teamwork staging or sandbox project, you can create a separate Teamwork account for development and set different values for the Preview environment. After adding environment variables, trigger a redeployment. In Vercel Dashboard, go to Deployments → click the three dots next to your latest deployment → Redeploy. Or push a new commit to trigger an automatic deployment. Verify the integration works by visiting your deployed URL and navigating to a test page that calls `/api/teamwork?resource=projects` — you should see your actual Teamwork projects in the JSON response.

Update the V0-generated dashboard components to fetch from your Teamwork API routes. Start with the projects overview — fetch `/api/teamwork?resource=projects` and map the response to your project card components. Teamwork's v3 API returns project data nested under a `projects` key, with each project having `stats` for task counts. Map these to your UI like this: `stats.tasksCounts.completed` for completed tasks, `stats.tasksCounts.active` for in-progress tasks, and calculate completion percentage as `(completed / total) * 100`. For the task table, the tasks endpoint returns tasks under a `tasks` key. Each task has `assignees` (array of user objects), `dueDate`, `priority`, `status` ('new', 'inprogress', 'completed'), and `timeEstimatesSum` for estimated hours. Map these to table rows with priority color coding. For time entries, fetch `/api/teamwork?resource=time&startDate=2026-01-01&endDate=2026-01-31` (pass current week dates dynamically). Time entries return under a `timeEntries` key with `hours`, `minutes`, `billable`, `projectId`, and `person` fields. Group by project on the client side using `Array.reduce()` to build your project subtotals. Implement optimistic filtering in the UI by storing the full task array in state and filtering/sorting client-side. For large Teamwork accounts with thousands of tasks, add server-side filtering by passing `projectId` or `assignedTo` query params and fetching on filter change rather than loading everything upfront.

1// Example: fetching and displaying Teamwork tasks
2'use client';
3import { useEffect, useState } from 'react';
4
5interface Task {
6  id: number;
7  name: string;
8  status: string;
9  dueDate: string | null;
10  priority: string;
11  assignees: { firstName: string; lastName: string }[];
12}
13
14export function TaskTable({ projectId }: { projectId?: string }) {
15  const [tasks, setTasks] = useState<Task[]>([]);
16  const [loading, setLoading] = useState(true);
17
18  useEffect(() => {
19    const params = projectId ? `&projectId=${projectId}` : '';
20    fetch(`/api/teamwork?resource=tasks${params}`)
21      .then(r => r.json())
22      .then(data => { setTasks(data.tasks || []); setLoading(false); });
23  }, [projectId]);
24
25  const isOverdue = (dueDate: string | null) =>
26    dueDate && new Date(dueDate) < new Date() && status !== 'completed';
27
28  if (loading) return <div>Loading tasks...</div>;
29
30  return (
31    <table className="w-full text-sm">
32      <thead>
33        <tr className="border-b">
34          <th className="text-left p-2">Task</th>
35          <th className="text-left p-2">Assignee</th>
36          <th className="text-left p-2">Due Date</th>
37          <th className="text-left p-2">Priority</th>
38          <th className="text-left p-2">Status</th>
39        </tr>
40      </thead>
41      <tbody>
42        {tasks.map(task => (
43          <tr key={task.id} className="border-b hover:bg-muted/50">
44            <td className="p-2">{task.name}</td>
45            <td className="p-2">{task.assignees.map(a => `${a.firstName} ${a.lastName}`).join(', ')}</td>
46            <td className={`p-2 ${isOverdue(task.dueDate) ? 'text-red-600 font-medium' : ''}`}>
47              {task.dueDate || '—'}
48            </td>
49            <td className="p-2">
50              <span className={`px-2 py-0.5 rounded text-xs font-medium ${
51                task.priority === 'high' ? 'bg-red-100 text-red-700' :
52                task.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-600'
53              }`}>{task.priority}</span>
54            </td>
55            <td className="p-2">{task.status}</td>
56          </tr>
57        ))}
58      </tbody>
59    </table>
60  );
61}