How to Integrate Lovable with Teamwork

Teamwork API tokens are generated from your user profile settings within your Teamwork site. Log into your Teamwork instance at yourcompany.teamwork.com and click your avatar in the top-right corner. Select 'Edit Profile', then navigate to the 'API Keys' section. Click 'Generate API Key' (or 'Create API Key' depending on your plan), optionally name the key 'Lovable Integration', and copy the token immediately. Teamwork's API uses an unusual Basic Authentication scheme: the token acts as the username and the literal letter 'X' is the password. When encoded to Base64 for the Authorization header, this becomes: Base64(token:X). Your Edge Function will construct this header automatically — you just need to store the raw token. In your Lovable project, open the Cloud tab via the '+' icon, navigate to Secrets, and add two secrets: TEAMWORK_API_TOKEN with your token value, and TEAMWORK_SITE_URL with your full site URL including protocol (e.g., https://yourcompany.teamwork.com). The site URL is needed because the API base URL is unique to your Teamwork instance — unlike SaaS APIs with a single base URL, every Teamwork customer has their own subdomain.

Teamwork's API uses Basic Authentication, which requires constructing an Authorization header with a Base64-encoded string of 'token:X'. In Deno, you can use the btoa() function available globally to perform the Base64 encoding. The Edge Function reads both secrets, constructs the auth header, and uses an action-based routing pattern to handle the most common Teamwork operations. Teamwork's API v3 returns responses with a specific structure: collection responses wrap data in arrays under the resource name key (e.g., { projects: [...] }), while single-resource responses use singular keys (e.g., { project: {...} }). The function handles this consistently and forwards the full response to your frontend for flexible data access. Note that Teamwork's API is hosted at your site URL, not a central API URL — the TEAMWORK_SITE_URL secret is used to construct all endpoint URLs dynamically.

1// supabase/functions/teamwork-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7};
8
9serve(async (req) => {
10  if (req.method === "OPTIONS") {
11    return new Response("ok", { headers: corsHeaders });
12  }
13
14  const apiToken = Deno.env.get("TEAMWORK_API_TOKEN");
15  const siteUrl = Deno.env.get("TEAMWORK_SITE_URL");
16  if (!apiToken || !siteUrl) {
17    return new Response(JSON.stringify({ error: "Teamwork credentials not configured" }), {
18      status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" },
19    });
20  }
21
22  const base64Auth = btoa(`${apiToken}:X`);
23  const authHeaders = {
24    Authorization: `Basic ${base64Auth}`,
25    "Content-Type": "application/json",
26  };
27  const base = `${siteUrl}/projects/api/v3`;
28
29  const { action, params = {} } = await req.json();
30  let resp;
31
32  switch (action) {
33    case "list_projects": {
34      const q = new URLSearchParams();
35      if (params.companyId) q.set("companyId", params.companyId);
36      if (params.status) q.set("status", params.status);
37      resp = await fetch(`${base}/projects.json?${q}`, { headers: authHeaders });
38      break;
39    }
40    case "get_project":
41      resp = await fetch(`${base}/projects/${params.projectId}.json`, { headers: authHeaders });
42      break;
43    case "list_tasks": {
44      const q = new URLSearchParams({ projectId: params.projectId });
45      if (params.assignedUserId) q.set("assignedUserId", params.assignedUserId);
46      resp = await fetch(`${base}/tasks.json?${q}`, { headers: authHeaders });
47      break;
48    }
49    case "get_milestones": {
50      const q = new URLSearchParams({ projectId: params.projectId });
51      resp = await fetch(`${base}/milestones.json?${q}`, { headers: authHeaders });
52      break;
53    }
54    case "list_time_entries": {
55      const q = new URLSearchParams({ projectId: params.projectId });
56      if (params.fromDate) q.set("fromDate", params.fromDate);
57      if (params.toDate) q.set("toDate", params.toDate);
58      resp = await fetch(`${base}/time.json?${q}`, { headers: authHeaders });
59      break;
60    }
61    case "create_time_entry":
62      resp = await fetch(`${base}/tasks/${params.taskId}/time.json`, {
63        method: "POST",
64        headers: authHeaders,
65        body: JSON.stringify({
66          timelog: {
67            hours: String(Math.floor(params.hours)),
68            minutes: String(Math.round((params.hours % 1) * 60)),
69            date: params.date,
70            description: params.description || "",
71            isBillable: params.isBillable ?? true,
72          }
73        }),
74      });
75      break;
76    case "list_companies":
77      resp = await fetch(`${base}/companies.json`, { headers: authHeaders });
78      break;
79    default:
80      return new Response(JSON.stringify({ error: `Unknown action: ${action}` }), {
81        status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" },
82      });
83  }
84
85  const data = await resp.json();
86  return new Response(JSON.stringify(data), {
87    status: resp.status, headers: { ...corsHeaders, "Content-Type": "application/json" },
88  });
89});

The most common use case for a Teamwork-Lovable integration is a client portal: a branded page showing the client their project's status without requiring Teamwork credentials or exposing your internal workspace. The key is filtering Teamwork data by company ID — every Teamwork project links to a company (the client), so you can fetch all projects for a given company and display only their data. The following prompt generates a project overview component that shows project health, milestone timeline, and time tracking summary — the three most valuable pieces of information for client billing conversations. It uses the Teamwork project's budgetHours field alongside logged time to calculate budget utilization, and renders milestones in chronological order with visual indicators for completed, upcoming, and overdue states.

The real power of a Teamwork integration for agency teams is closing the loop between tracked time and client billing. After building the read-only portal, you can add a time-logging interface for internal use and a billing summary feature that formats logged time entries as an invoice-ready report. Teamwork stores time entries with billable flags, rates, and descriptions — enough information to generate a formatted summary of billable hours by task category. For teams that want to go further, RapidDev's team can help build a complete invoice generation flow that takes Teamwork time entries and uses the Stripe or QuickBooks integration to generate actual invoices. The Edge Function handles fetching and aggregating time data, and a second Lovable page generates a formatted billing report that can be exported as a PDF or emailed to clients.