How to Integrate RescueTime with V0

1// app/api/rescuetime/summary/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const RESCUETIME_API_BASE = 'https://www.rescuetime.com/anapi/data';
5
6interface RescueTimeRow {
7  date: string;
8  timeSpentSeconds: number;
9  activity: string;
10  category: string;
11  productivityScore: number;
12}
13
14export async function GET(request: NextRequest) {
15  const apiKey = process.env.RESCUETIME_API_KEY;
16
17  if (!apiKey) {
18    return NextResponse.json(
19      { error: 'RescueTime API key not configured' },
20      { status: 500 }
21    );
22  }
23
24  const { searchParams } = new URL(request.url);
25  const date = searchParams.get('date') || new Date().toISOString().split('T')[0];
26
27  const params = new URLSearchParams({
28    key: apiKey,
29    perspective: 'rank',
30    resolution_time: 'day',
31    restrict_begin: date,
32    restrict_end: date,
33    format: 'json',
34  });
35
36  try {
37    const response = await fetch(`${RESCUETIME_API_BASE}?${params.toString()}`, {
38      next: { revalidate: 300 }, // Cache for 5 minutes
39    });
40
41    if (!response.ok) {
42      throw new Error(`RescueTime API error: ${response.status}`);
43    }
44
45    const data = await response.json();
46
47    // Transform rows: [date, seconds, people, activity, category, productivity]
48    const rows: RescueTimeRow[] = (data.rows || []).map((row: (string | number)[]) => ({
49      date: row[0] as string,
50      timeSpentSeconds: row[1] as number,
51      activity: row[3] as string,
52      category: row[4] as string,
53      productivityScore: row[5] as number,
54    }));
55
56    // Compute summary stats
57    const totalSeconds = rows.reduce((sum, r) => sum + r.timeSpentSeconds, 0);
58    const productiveSeconds = rows
59      .filter((r) => r.productivityScore > 0)
60      .reduce((sum, r) => sum + r.timeSpentSeconds, 0);
61    const productivityPercent =
62      totalSeconds > 0 ? Math.round((productiveSeconds / totalSeconds) * 100) : 0;
63
64    // Group by category
65    const byCategory: Record<string, number> = {};
66    for (const row of rows) {
67      byCategory[row.category] = (byCategory[row.category] || 0) + row.timeSpentSeconds;
68    }
69    const categories = Object.entries(byCategory)
70      .map(([name, seconds]) => ({ name, hours: Math.round((seconds / 3600) * 10) / 10 }))
71      .sort((a, b) => b.hours - a.hours);
72
73    return NextResponse.json({
74      date,
75      totalHours: Math.round((totalSeconds / 3600) * 10) / 10,
76      productivityPercent,
77      topActivities: rows.slice(0, 10),
78      categories,
79    });
80  } catch (error) {
81    console.error('RescueTime API error:', error);
82    return NextResponse.json(
83      { error: 'Failed to fetch RescueTime data' },
84      { status: 500 }
85    );
86  }
87}

1// app/components/ProductivityDashboard.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5
6interface SummaryData {
7  date: string;
8  totalHours: number;
9  productivityPercent: number;
10  categories: { name: string; hours: number }[];
11  topActivities: { activity: string; timeSpentSeconds: number; productivityScore: number }[];
12}
13
14export default function ProductivityDashboard() {
15  const [data, setData] = useState<SummaryData | null>(null);
16  const [loading, setLoading] = useState(true);
17  const [error, setError] = useState<string | null>(null);
18  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
19
20  useEffect(() => {
21    setLoading(true);
22    fetch(`/api/rescuetime/summary?date=${date}`)
23      .then((res) => res.json())
24      .then((d) => {
25        setData(d);
26        setLoading(false);
27      })
28      .catch(() => {
29        setError('Failed to load RescueTime data');
30        setLoading(false);
31      });
32  }, [date]);
33
34  if (loading) return <div className="animate-pulse h-64 bg-gray-100 rounded-lg" />;
35  if (error) return <div className="text-red-500 p-4">{error}</div>;
36  if (!data) return null;
37
38  return (
39    <div className="space-y-6 p-6">
40      <div className="flex items-center justify-between">
41        <h1 className="text-2xl font-bold">Productivity Dashboard</h1>
42        <input
43          type="date"
44          value={date}
45          onChange={(e) => setDate(e.target.value)}
46          className="border rounded px-3 py-1 text-sm"
47        />
48      </div>
49      <div className="grid grid-cols-2 gap-4">
50        <div className="bg-white border rounded-lg p-4">
51          <div className="text-sm text-gray-500">Productivity Score</div>
52          <div className={`text-4xl font-bold ${
53            data.productivityPercent >= 70 ? 'text-green-600' :
54            data.productivityPercent >= 40 ? 'text-yellow-500' : 'text-red-500'
55          }`}>{data.productivityPercent}%</div>
56        </div>
57        <div className="bg-white border rounded-lg p-4">
58          <div className="text-sm text-gray-500">Total Hours Tracked</div>
59          <div className="text-4xl font-bold text-gray-800">{data.totalHours}h</div>
60        </div>
61      </div>
62      <div className="bg-white border rounded-lg p-4">
63        <h2 className="font-semibold mb-3">Time by Category</h2>
64        {data.categories.map((cat) => (
65          <div key={cat.name} className="flex justify-between py-1 text-sm">
66            <span>{cat.name}</span>
67            <span className="font-medium">{cat.hours}h</span>
68          </div>
69        ))}
70      </div>
71    </div>
72  );
73}