How to Integrate Everhour with V0

Everhour uses token-based authentication. Your API token is found in your Everhour account settings and grants access to all your workspace data. To get your API token, log into Everhour at app.everhour.com. Click on your profile name or avatar in the top-right corner and select 'Account Settings' or 'Profile'. Navigate to the 'API' section in your profile settings. You will see your API token displayed there. Click to reveal or copy the token. If you do not see an API section, it may be that only workspace owners or admins have API access on your plan. Everhour's API token is a long alphanumeric string that identifies you as a user. Unlike some APIs, Everhour uses a single user-level token rather than organization-level tokens, which means API calls will have the same access permissions as your user account. If you are a workspace owner, you have full access to all projects and team members' time data. All Everhour API calls use the base URL https://api.everhour.com. Authentication uses a custom header: X-Api-Key with your token value. The API supports both JSON request and response bodies. For finding project IDs, navigate to a project in Everhour, and the project ID appears in the URL: https://app.everhour.com/#/projects/{projectId}. Alternatively, your API route can fetch all projects and return their IDs alongside names, letting your frontend choose which projects to display.

Store your Everhour API token securely in Vercel's environment variables before writing any code. This ensures the token is available to your serverless function without being exposed in your codebase. Open your Vercel Dashboard, navigate to your project, click 'Settings', and select 'Environment Variables'. Add the following variable: EVERHOUR_API_TOKEN: Your Everhour API token. This is a secret — do not add a NEXT_PUBLIC_ prefix. Set it for Production, Preview, and Development environments. The token grants access to all your workspace's time and budget data, so protecting it server-side is important. Save the variable and trigger a redeployment. For local development, add EVERHOUR_API_TOKEN to your .env.local file. The .env.local file is excluded from Git by default in V0-generated projects.

1# .env.local — local development only, excluded from Git
2EVERHOUR_API_TOKEN=your_everhour_api_token_here

Create the Next.js API route that fetches project data from Everhour. Start with the projects endpoint to get a list of all active projects with their budget information. Create app/api/everhour/projects/route.ts. The Everhour projects endpoint is GET https://api.everhour.com/projects and returns an array of project objects. Each project includes id, name, type, status, budget (with type, progress, and limit fields), team members, and time tracking totals. The budget object is particularly valuable for agency dashboards. budget.type can be 'money' (dollar budget) or 'time' (hour budget). budget.progress.trackedTime contains seconds tracked so far. budget.progress.cost contains dollars spent. budget.limit is the budget ceiling. Calculate the percentage used as (trackedTime / (limit * 3600)) * 100 for time budgets. Filter for active projects (status: 'active') to avoid displaying archived projects. Sort by budget percentage used (most critical first) for an at-a-glance priority view. Everhour also offers a team report endpoint at GET https://api.everhour.com/team/time that returns time entries grouped by team member and project for a date range. This is useful for weekly team summary dashboards. Pass start and end query parameters in YYYY-MM-DD format.

1import { NextResponse } from 'next/server';
2
3interface EverhourBudget {
4  type: 'money' | 'time' | null;
5  progress: {
6    trackedTime: number;
7    cost: number;
8  } | null;
9  limit: number | null;
10}
11
12interface EverhourProject {
13  id: string;
14  name: string;
15  status: string;
16  budget: EverhourBudget | null;
17  time: {
18    total: number;
19  } | null;
20}
21
22export async function GET() {
23  const apiToken = process.env.EVERHOUR_API_TOKEN;
24
25  if (!apiToken) {
26    return NextResponse.json(
27      { error: 'Everhour configuration missing' },
28      { status: 500 }
29    );
30  }
31
32  try {
33    const response = await fetch('https://api.everhour.com/projects', {
34      headers: {
35        'X-Api-Key': apiToken,
36        'Content-Type': 'application/json',
37      },
38      next: { revalidate: 120 },
39    });
40
41    if (!response.ok) {
42      const errorText = await response.text();
43      console.error('Everhour API error:', errorText);
44      return NextResponse.json(
45        { error: `Everhour returned ${response.status}` },
46        { status: response.status }
47      );
48    }
49
50    const projects: EverhourProject[] = await response.json();
51
52    const activeProjects = projects
53      .filter((p) => p.status === 'active')
54      .map((p) => {
55        const trackedSeconds = p.budget?.progress?.trackedTime ?? p.time?.total ?? 0;
56        const budgetLimit = p.budget?.limit ?? null;
57        const budgetType = p.budget?.type ?? null;
58
59        let budgetPercent = 0;
60        if (budgetType === 'time' && budgetLimit && budgetLimit > 0) {
61          // Budget limit is in seconds for time budgets
62          budgetPercent = Math.min(
63            100,
64            Math.round((trackedSeconds / budgetLimit) * 100)
65          );
66        } else if (budgetType === 'money' && budgetLimit && budgetLimit > 0) {
67          const cost = p.budget?.progress?.cost ?? 0;
68          budgetPercent = Math.min(100, Math.round((cost / budgetLimit) * 100));
69        }
70
71        return {
72          id: p.id,
73          name: p.name,
74          totalHours: Math.round((trackedSeconds / 3600) * 100) / 100,
75          totalSeconds: trackedSeconds,
76          budgetType,
77          budgetLimitHours:
78            budgetType === 'time' && budgetLimit
79              ? Math.round((budgetLimit / 3600) * 100) / 100
80              : null,
81          budgetLimitMoney: budgetType === 'money' ? budgetLimit : null,
82          budgetCost: p.budget?.progress?.cost ?? 0,
83          budgetPercent,
84        };
85      })
86      .sort((a, b) => b.budgetPercent - a.budgetPercent);
87
88    return NextResponse.json({ projects: activeProjects, total: activeProjects.length });
89  } catch (error) {
90    console.error('Everhour projects fetch failed:', error);
91    return NextResponse.json(
92      { error: 'Failed to fetch projects' },
93      { status: 500 }
94    );
95  }
96}

With the projects API route returning budget data, prompt V0 to generate the budget tracking dashboard. Budget dashboards need clear visual indicators of health (green/yellow/red based on percentage) and actionable numbers (hours remaining, days until overrun at current burn rate). Before writing the V0 prompt, test /api/everhour/projects to see what data is actually returned for your projects. Note whether your projects have time budgets, money budgets, or no budgets — this affects which columns to display. For a budget health dashboard, describe the card layout with the project name, progress bar, and key numbers. Ask V0 to color the progress bar and status badge based on thresholds: green below 75%, yellow for 75-90%, red above 90%. This creates an immediate at-a-glance view of which projects need attention. For projects with remaining hours, ask V0 to calculate and display 'X hours remaining' or 'Over budget by X hours' based on the budgetPercent value. If your API returns enough data, you can also calculate the burn rate (hours per day) and project when the budget will be exhausted. Ask V0 to add a project filter (All / Over 90% / Over 75%) and a last-updated timestamp so users know how fresh the data is. Include a loading skeleton that matches your card layout and an error state with a retry button.

Project managers often need to drill into specific time entries to understand where hours are going. Add a time entries API route that returns individual logged entries filtered by project and date range. Create app/api/everhour/time-entries/route.ts. The Everhour time entries endpoint is GET https://api.everhour.com/team/time with query parameters from (start date in YYYY-MM-DD format) and to (end date in YYYY-MM-DD format). You can also filter by project using the projects[] parameter. The response is an array of time records, each with user (name, email), task (id, name, project name), time (seconds), date (YYYY-MM-DD string), and an optional comment. Transform seconds to hours for display: const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60). For client-facing reports, you may want to group entries by date and calculate daily and weekly subtotals. For internal reports, grouping by team member shows individual utilization. Ask V0 to generate a tabbed view where the same data can be viewed by date, by person, or by task. For agencies and consultants who want full billing automation with Everhour time data feeding into invoice generation, RapidDev can help build an end-to-end workflow connecting Everhour time entries to invoice generation and payment collection.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function GET(request: NextRequest) {
4  const apiToken = process.env.EVERHOUR_API_TOKEN;
5
6  if (!apiToken) {
7    return NextResponse.json(
8      { error: 'Everhour configuration missing' },
9      { status: 500 }
10    );
11  }
12
13  const { searchParams } = new URL(request.url);
14
15  const now = new Date();
16  const weekStart = new Date(now);
17  weekStart.setDate(now.getDate() - now.getDay());
18  const weekEnd = new Date(weekStart);
19  weekEnd.setDate(weekStart.getDate() + 6);
20
21  const formatDate = (d: Date) => d.toISOString().split('T')[0];
22
23  const from = searchParams.get('start') || formatDate(weekStart);
24  const to = searchParams.get('end') || formatDate(weekEnd);
25  const projectId = searchParams.get('projectId');
26
27  const url = new URL('https://api.everhour.com/team/time');
28  url.searchParams.set('from', from);
29  url.searchParams.set('to', to);
30  if (projectId) {
31    url.searchParams.append('projects[]', projectId);
32  }
33
34  try {
35    const response = await fetch(url.toString(), {
36      headers: {
37        'X-Api-Key': apiToken,
38        'Content-Type': 'application/json',
39      },
40      next: { revalidate: 60 },
41    });
42
43    if (!response.ok) {
44      return NextResponse.json(
45        { error: `Everhour returned ${response.status}` },
46        { status: response.status }
47      );
48    }
49
50    const data = await response.json();
51
52    const entries = (Array.isArray(data) ? data : []).map(
53      (entry: {
54        user: { name: string; email: string };
55        task: { name: string } | null;
56        time: number;
57        date: string;
58        comment: string | null;
59      }) => ({
60        date: entry.date,
61        userName: entry.user?.name || 'Unknown',
62        taskName: entry.task?.name || 'No task',
63        seconds: entry.time,
64        hours: Math.floor(entry.time / 3600),
65        minutes: Math.floor((entry.time % 3600) / 60),
66        comment: entry.comment || '',
67      })
68    );
69
70    return NextResponse.json({ entries, dateRange: { from, to } });
71  } catch (error) {
72    console.error('Everhour time entries fetch failed:', error);
73    return NextResponse.json(
74      { error: 'Failed to fetch time entries' },
75      { status: 500 }
76    );
77  }
78}