Everhour

Before touching FlutterFlow, confirm that your Everhour workspace is on a paid Team plan. This is not a formality — the free plan's API access status is disputed across different sources, and if your workspace is on the free tier, every API call will return a 401 Unauthorized regardless of how correctly you have configured the integration. Log into Everhour at app.everhour.com, navigate to Settings (bottom-left) → Billing, and confirm your current plan. If you see 'Free', you need to upgrade to Team to proceed. Once on a paid plan, get your API token. Navigate to My Profile (click your avatar or name, bottom-left) → API section (or look for 'Token'). Copy the API token shown there. This is a long alphanumeric string that identifies your personal Everhour account — keep it in a password manager, not a code file. Note the exact header name: X-Api-Key — capital X, capital A, capital K. Header names are technically case-insensitive in HTTP, but certain implementations and FlutterFlow's API Call matching can be sensitive to casing. Match the casing shown in Everhour's official documentation exactly to avoid silent auth failures. Also note that each team member has their own API token. If you are building a dashboard that shows all team members' data (not just your own), you will use one admin or manager token on the server side — the /team/time endpoint returns data for all users when called with a token that has the appropriate access level.

Open your FlutterFlow project in the browser. In the left navigation panel, click API Calls (the plug icon). Click + Add → Create API Group. A dialog appears for name and base URL. Set: - Group name: Everhour - Base URL: https://api.everhour.com Do not add a trailing slash after 'everhour.com' — FlutterFlow appends the endpoint path you specify in each API Call directly to the base URL, and a double slash in the resulting URL can cause routing issues on some endpoints. Click the Headers tab. Add one header: - Header name: X-Api-Key - Value: your Everhour API token The header name must be X-Api-Key (capital X, capital A, capital K) — this matches Everhour's documented header name. Do not write 'x-api-key' (all lowercase) or 'X-API-KEY' (all uppercase K). While HTTP headers are officially case-insensitive in the RFC spec, using the exact documented casing avoids any potential issues. Do not add a 'Bearer ' prefix, an 'Authorization:' wrapper, or any other formatting — the value field should contain only the raw API token string. Click Save. The API Group is now configured. All API Calls you add inside this group will automatically include the X-Api-Key header in every request.

1// Everhour API Group configuration reference:
2// Group name: Everhour
3// Base URL: https://api.everhour.com
4// Headers (static):
5//   X-Api-Key: your-everhour-api-token-here
6//
7// Note: header casing matters — use X-Api-Key exactly as shown
8// Do NOT use: x-api-key, X-API-KEY, or Authorization: Bearer ...

Inside the Everhour API Group, click + Add API Call. Name it 'Get Projects'. Set the method to GET and the endpoint to /projects (the full URL becomes https://api.everhour.com/projects). Go to the Response & Test tab and click Test to fire a live request. If you see 200 OK with a JSON array, your API key and plan are confirmed working. Paste the response JSON into the sample field and click Generate JSON Paths. Everhour projects have fields including id, name, billing (budget type), and members. Create a Data Type called 'EverhourProject' with fields: id (String), name (String). Map the JSON paths: $[*].id and $[*].name. Add a second API Call: 'Get Team Users'. Endpoint: /team/users. This returns all users in your Everhour workspace. Test it and create a Data Type 'EverhourUser' with fields: id (Integer), name (String), email (String). Map from: $[*].id, $[*].name, $[*].email. Add a third API Call: 'Get Team Time'. Endpoint: /team/time. This is the main worklog endpoint — it returns time entries for all team members. Add query variable parameters: - from (String) — start date, format: YYYY-MM-DD - to (String) — end date, format: YYYY-MM-DD - limit (Integer) — max entries per call (check Everhour docs for max, typically 200-500) Create a Data Type 'EverhourTimeEntry' with fields: id (String), user_id (Integer), project_id (String), task_id (String), date (String), time (Integer — seconds tracked). Map JSON paths from the response. Test with today's date as both from and to to verify the call returns entries. Note: Everhour's practical rate limit is not publicly published but is approximately 100 requests per minute from multiple sources. Keep this in mind for dashboard polling — a call every 5-10 minutes is safe; a call every few seconds is not.

1// JSON Path mappings after generating from sample responses:
2// GET /projects:
3// $[*].id   → EverhourProject.id (String)
4// $[*].name → EverhourProject.name (String)
5//
6// GET /team/users:
7// $[*].id    → EverhourUser.id (Integer)
8// $[*].name  → EverhourUser.name (String)
9// $[*].email → EverhourUser.email (String)
10//
11// GET /team/time (with from/to query params):
12// $[*].id         → EverhourTimeEntry.id (String)
13// $[*].user       → EverhourTimeEntry.user_id (Integer)
14// $[*].projectId  → EverhourTimeEntry.project_id (String)
15// $[*].date       → EverhourTimeEntry.date (String)
16// $[*].time       → EverhourTimeEntry.time (Integer, seconds)

Create your main dashboard screen. At the top, add two DatePicker widgets (or a date range picker): start_date and end_date. Store the selected dates in App State variables. Add a 'Load Timesheets' Button. When the button is tapped, trigger an Action Flow that: 1. Calls Get Projects and stores the result in App State (List of EverhourProject) 2. Calls Get Team Users and stores in App State (List of EverhourUser) 3. Calls Get Team Time with the selected date range and stores in App State (List of EverhourTimeEntry) For the main list, add a ListView bound to the App State users list. Inside each row, show the user's name and their total time for the selected period. Use a Custom Function (not a Custom Action) in FlutterFlow to calculate the total: filter the EverhourTimeEntry list where user_id matches the current list item's id, then sum the 'time' field (in seconds). Divide by 3600 and format as 'Xh Ym' for display. Add a second list for project breakdown: a horizontal scrolling row of project chips or a separate screen showing time per project. Again use Custom Functions to group and aggregate the time entries list by project_id, look up the project name from the EverhourProject list, and display total hours. For the 'today' quick view, show a filtered subset: filter the time entries where date equals today's date string. Display these as a compact list at the top of the dashboard for the manager's first glance. Add empty state widgets to all ListViews so the screen does not appear broken when no time has been logged for the selected date range.

Inside the Everhour API Group, add a fourth API Call. Name it 'Log Time'. Set the method to POST. Everhour's time logging endpoint depends on whether you are logging time against a specific task or a project. The task-level endpoint is /tasks/{task_id}/time, and there is also a general time entry endpoint — check Everhour's current API documentation for the exact URL structure, as it has changed between API versions. For a simpler implementation, use the task-level endpoint: add a path variable task_id (String). In the Variables tab, add body variables: date (String, YYYY-MM-DD format), time (Integer, seconds). In the Body tab, select JSON body type and enter: { "time": {{time}}, "date": "{{date}}" } Create a time-logging screen (or a modal/bottom sheet from the dashboard). Add: - A Dropdown widget bound to the projects list from App State — when a project is selected, store its id - A TextField for hours (convert to seconds before the API call: multiply by 3600) - A DatePicker defaulting to today - A Button labeled 'Log Time' The Button's Action Flow: convert the hours text field value to an Integer, multiply by 3600, call the Log Time API Call with the result as the 'time' variable and the selected date. On success (HTTP 200 or 201), show a SnackBar 'Time logged successfully' and optionally refresh the team time data. On error, show the error message from the response body. Test this in FlutterFlow's Test Mode by logging a small amount of time (e.g., 60 seconds) and verifying it appears in your Everhour account's timesheet immediately.

1// POST /tasks/{{task_id}}/time
2// Method: POST
3// Headers: inherited from API Group (X-Api-Key)
4// Path variable: task_id (String)
5// Body (JSON):
6{
7  "time": {{time_in_seconds}},
8  "date": "{{date}}"
9}
10// time_in_seconds: convert hours (e.g., 1.5) to seconds (5400) before passing
11// date: YYYY-MM-DD format, e.g., '2026-07-10'
12//
13// To log against a project (if task_id is unknown):
14// Check Everhour docs for project-level time entry endpoints

For a production app release, the Everhour API key should not be embedded in the compiled Flutter binary. While time-tracking API keys have lower risk than payment credentials, a leaked key allows anyone who extracts it to read your team's time data, log fraudulent time entries, or deplete your API rate limits. The Firebase Cloud Function proxy pattern is consistent across all REST integrations: a Node.js function holds the API key in server-side Firebase environment config, receives requests from FlutterFlow, adds the X-Api-Key header, forwards the call to Everhour, and returns the response. In FlutterFlow, you update the API Group's base URL to point to the Cloud Function URL instead of api.everhour.com. The proxy function handles both GET calls (projects, users, time entries) and POST calls (logging time) by forwarding the method, path, query parameters, and request body from FlutterFlow to Everhour. Add CORS headers to the Cloud Function if you have a web build of your FlutterFlow app. Set the Everhour key using Firebase Functions config: firebase functions:config:set everhour.apikey='your-token-here'. The Cloud Function reads it as functions.config().everhour.apikey. If you prefer Supabase as your backend (many FlutterFlow apps already use Supabase), a Supabase Edge Function works identically — store the key as a Supabase environment secret and write a Deno function that proxies requests to Everhour. Choose whichever backend your app already uses to minimize new infrastructure. If you want help with this setup, RapidDev's team handles FlutterFlow integrations like this regularly and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function — Everhour proxy (Node.js, index.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.everhourProxy = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') {
8    res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
9    res.set('Access-Control-Allow-Headers', 'Content-Type');
10    res.status(204).send('');
11    return;
12  }
13
14  const apiKey = functions.config().everhour.apikey;
15  const path = req.query.path || '';
16  const queryParams = { ...req.query };
17  delete queryParams.path; // remove our own routing param
18
19  try {
20    const response = await axios({
21      method: req.method,
22      url: `https://api.everhour.com/${path}`,
23      headers: {
24        'X-Api-Key': apiKey,
25        'Content-Type': 'application/json'
26      },
27      params: queryParams,
28      data: req.method === 'POST' || req.method === 'PUT' ? req.body : undefined
29    });
30    res.status(response.status).json(response.data);
31  } catch (error) {
32    const status = error.response ? error.response.status : 500;
33    res.status(status).json(error.response ? error.response.data : { error: 'Proxy error' });
34  }
35});