clienthub/src/components/admin/tabs/TimerTab.tsx

"use client";

import { TimerCell } from "@/components/admin/TimerCell";
import { ProfitabilityCard } from "@/components/admin/ProfitabilityCard";

type TimerTabProps = {
  projectId: string;
  acceptedTotal: string;
  activeTimerEntryId: string | null;
  activeTimerStartedAt: Date | null;
  totalTrackedSeconds: number;
  targetHourlyRate: number;
};

export function TimerTab({
  projectId,
  acceptedTotal,
  activeTimerEntryId,
  activeTimerStartedAt,
  totalTrackedSeconds,
  targetHourlyRate,
}: TimerTabProps) {
  return (
    <div className="space-y-6 max-w-sm">
      <div className="bg-white rounded-lg border border-[#e5e7eb] p-4">
        <h3 className="font-medium text-[#1a1a1a] mb-4">Timer</h3>
        <TimerCell
          clientId={projectId}
          activeEntryId={activeTimerEntryId}
          activeStartedAt={activeTimerStartedAt}
          totalTrackedSeconds={totalTrackedSeconds}
        />
      </div>

      <ProfitabilityCard
        acceptedTotal={acceptedTotal}
        totalTrackedSeconds={totalTrackedSeconds}
        targetHourlyRate={targetHourlyRate}
      />
    </div>
  );
}