How to Integrate Retool with Everhour

Log into your Everhour account and navigate to Settings by clicking the gear icon in the bottom-left sidebar. In the Settings menu, select the 'Integrations' tab, then scroll down to find the 'API' section. Click 'Generate API Key' to create a new key. Everhour displays the key value — copy it immediately. Unlike some platforms, Everhour allows you to regenerate this key at any time, but doing so will invalidate the old key and break any existing integrations. Store the key in a password manager or secure notes app before proceeding. Note that the API key is tied to your user account and inherits your Everhour permissions — if your account has access to all projects and all team members, the API key will too. For team-wide dashboards, use a dedicated admin account's API key to ensure access to all workspace data, not just your own time entries.

In Retool, navigate to the Resources tab in the left sidebar and click 'Create New'. Select 'REST API' from the resource type list. Set the Base URL to 'https://api.everhour.com'. This is Everhour's API base endpoint — all query paths will be appended to this URL. Under the Headers section, add one required header: set the key to 'X-Api-Key' and the value to '{{ retoolContext.configVars.EVERHOUR_API_KEY }}'. Before saving the resource, go to Retool Settings → Configuration Variables and add a new variable named 'EVERHOUR_API_KEY' with your API key value, checking the 'Secret' toggle so it cannot be accessed from frontend code. Return to the resource configuration and save. Click 'Test Resource' or create a quick query to GET '/team/members' — a successful response confirms the API key is valid and the resource is correctly configured. Name the resource 'Everhour' for easy identification across your Retool apps.

1{
2  "Base URL": "https://api.everhour.com",
3  "Headers": {
4    "X-Api-Key": "{{ retoolContext.configVars.EVERHOUR_API_KEY }}",
5    "Content-Type": "application/json"
6  }
7}

Create a new query in your Retool app using the Everhour resource. Set the method to GET and the path to '/time/records'. Everhour's time records endpoint accepts several query parameters for filtering the results: 'limit' sets the maximum number of records per page (up to 50), 'page' enables pagination starting from 1, 'from' and 'to' accept date strings in YYYY-MM-DD format to filter by date range, 'projects' accepts a comma-separated list of project IDs, and 'users' accepts comma-separated user IDs. Add a DateRangePicker component to your Retool app to drive the 'from' and 'to' parameters dynamically. The time records response is an array of objects, each containing a 'time' field (in seconds — divide by 3600 to get hours), 'date', 'user' object, and 'task' object with the project information. Run the query to inspect the response structure before building transformers.

1// GET /time/records
2// Query parameters:
3// from: {{ dateRange.start || new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().split('T')[0] }}
4// to: {{ dateRange.end || new Date().toISOString().split('T')[0] }}
5// limit: 50
6// page: {{ pagination.page || 1 }}
7// users: {{ userFilter.value || '' }}
8// projects: {{ projectFilter.value || '' }}

Add a JavaScript transformer to the time records query to aggregate raw records into per-member and per-project summaries. Open the query's Advanced tab and enable 'Transform query results'. The transformer receives the raw array of time records in the 'data' variable and should return a reshaped array suitable for display in a Retool Table or Chart. Group records by user ID, summing the total seconds logged. Convert to hours and calculate a utilization percentage based on a configurable target (such as 8 hours per working day). Add a second grouping by project to show the top projects per user. Bind the transformer output to a Table component by setting the Table's data property to '{{ getTimeRecords.data }}'. Add a Bar Chart component with the summary data to show team-level utilization visually, binding the x-axis to user names and the y-axis to total hours logged.

1// Transformer: aggregate time records by user
2const records = data || [];
3const userMap = {};
4
5records.forEach(record => {
6  const userId = record.user ? record.user.id : 'unknown';
7  const userName = record.user ? record.user.name : 'Unknown';
8  const projectName = record.task && record.task.projects
9    ? record.task.projects[0]
10    : 'No Project';
11  const hours = (record.time || 0) / 3600;
12
13  if (!userMap[userId]) {
14    userMap[userId] = {
15      user_id: userId,
16      user_name: userName,
17      total_hours: 0,
18      project_breakdown: {}
19    };
20  }
21
22  userMap[userId].total_hours += hours;
23
24  if (!userMap[userId].project_breakdown[projectName]) {
25    userMap[userId].project_breakdown[projectName] = 0;
26  }
27  userMap[userId].project_breakdown[projectName] += hours;
28});
29
30return Object.values(userMap).map(user => ({
31  user_name: user.user_name,
32  total_hours: Math.round(user.total_hours * 100) / 100,
33  top_project: Object.entries(user.project_breakdown)
34    .sort((a, b) => b[1] - a[1])
35    .map(([name, hrs]) => `${name}: ${Math.round(hrs * 10) / 10}h`)
36    .slice(0, 3)
37    .join(', ')
38})).sort((a, b) => b.total_hours - a.total_hours);

Create a second query to fetch Everhour project data including budget information. Use GET '/projects' with a 'status=active' parameter to get all active projects. The project response includes budget object with 'value' (estimated hours) and 'progress' (total logged seconds). Create a JavaScript transformer that computes the burn rate percentage for each project: (logged_hours / budget_hours) * 100. Display this in a Table with conditional row colors — green for under 70%, yellow for 70-90%, red for over 90% — using Retool's row color feature based on the percentage value. For cross-tool joining, if you have an Asana or Jira resource also configured in Retool, create a JavaScript query that takes '{{ everhourProjects.data }}' and matches project names or IDs against the other tool's project list, merging status and deadline fields. For complex integrations involving multiple Resources, custom transformers, and Workflows, RapidDev's team can help architect and build your Retool solution.

1// GET /projects
2// Query parameter: status=active
3
4// Transformer: compute budget burn rate
5const projects = data || [];
6return projects.map(project => {
7  const budgetHours = project.budget && project.budget.value
8    ? project.budget.value
9    : null;
10  const loggedSeconds = project.budget && project.budget.progress
11    ? project.budget.progress
12    : 0;
13  const loggedHours = Math.round(loggedSeconds / 3600 * 100) / 100;
14  const burnPct = budgetHours && budgetHours > 0
15    ? Math.round((loggedHours / budgetHours) * 100)
16    : null;
17
18  return {
19    project_id: project.id,
20    project_name: project.name,
21    budget_hours: budgetHours || 'No budget',
22    logged_hours: loggedHours,
23    remaining_hours: budgetHours ? Math.max(0, budgetHours - loggedHours) : 'N/A',
24    burn_pct: burnPct !== null ? `${burnPct}%` : 'N/A',
25    status: burnPct === null ? 'no_budget'
26      : burnPct < 70 ? 'on_track'
27      : burnPct < 90 ? 'at_risk'
28      : 'over_budget'
29  };
30}).sort((a, b) => {
31  const order = { over_budget: 0, at_risk: 1, on_track: 2, no_budget: 3 };
32  return order[a.status] - order[b.status];
33});