Ship Your SaaS MVP in One Weekend

// components/TimeTracker.tsx
"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Play, Pause, Square } from "lucide-react";

interface TimeEntry {
  id: string;
  projectName: string;
  startTime: Date;
  endTime?: Date;
  duration: number;
}

export function TimeTracker() {
  const [isRunning, setIsRunning] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [projectName, setProjectName] = useState("");

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isRunning) {
      interval = setInterval(() => {
        setCurrentTime((time) => time + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isRunning]);

  const startTimer = async () => {
    setIsRunning(true);
    // API call to create time entry
    await fetch("/api/time-entries", {
      method: "POST",
      body: JSON.stringify({ projectName, startTime: new Date() }),
    });
  };

  const stopTimer = async () => {
    setIsRunning(false);
    // API call to stop time entry
    await fetch("/api/time-entries", {
      method: "PATCH",
      body: JSON.stringify({ endTime: new Date(), duration: currentTime }),
    });
    setCurrentTime(0);
  };

  const formatTime = (seconds: number) => {
    const hrs = Math.floor(seconds / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    return `${hrs.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
  };

  return (
    <Card className="p-8">
      <div className="text-center mb-6">
        <div className="font-mono text-6xl font-bold text-primary mb-4">
          {formatTime(currentTime)}
        </div>
        <input
          type="text"
          value={projectName}
          onChange={(e) => setProjectName(e.target.value)}
          placeholder="Project name..."
          className="w-full max-w-md px-4 py-2 rounded-lg border border-border bg-background"
          disabled={isRunning}
        />
      </div>

      <div className="flex gap-3 justify-center">
        {!isRunning ? (
          <Button onClick={startTimer} size="lg" className="gap-2">
            <Play className="h-5 w-5" />
            Start Timer
          </Button>
        ) : (
          <Button onClick={stopTimer} size="lg" className="gap-2" variant="destructive">
            <Square className="h-5 w-5" />
            Stop Timer
          </Button>
        )}
      </div>
    </Card>
  );
}