70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import {
|
|
type TimeEntry,
|
|
type TimeSpentSummary
|
|
} from '@emberclone/shared';
|
|
|
|
interface TimeSpentSummaryProps {
|
|
dailyTargetHours?: number;
|
|
}
|
|
|
|
const TimeSpentSummary: React.FC<TimeSpentSummaryProps> = ({ dailyTargetHours = 8 }) => {
|
|
const { data, isLoading, error } = useQuery<TimeSpentSummary>({
|
|
queryKey: ['time-spent-summary'],
|
|
queryFn: async () => {
|
|
const res = await fetch('/api/time/summary');
|
|
if (!res.ok) throw new Error('Failed to fetch summary');
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
if (isLoading) return <div className="w-64 p-4 text-sm text-gray-500 animate-pulse">Loading summary...</div>;
|
|
if (error) return <div className="w-64 p-4 text-sm text-red-500">Error loading summary</div>;
|
|
|
|
const periods = [
|
|
{ label: 'Today', value: data?.today || 0, key: 'today' },
|
|
{ label: 'This Week', value: data?.week || 0, key: 'week' },
|
|
{ label: 'This Month', value: data?.month || 0, key: 'month' },
|
|
];
|
|
|
|
const formatHours = (decimalHours: number) => {
|
|
const h = Math.floor(decimalHours);
|
|
const m = Math.round((decimalHours - h) * 60);
|
|
return `${h}h ${m}m`;
|
|
};
|
|
|
|
return (
|
|
<div className="w-64 p-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm">
|
|
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4">Time Spent</h3>
|
|
<div className="space-y-4">
|
|
{periods.map((period) => {
|
|
// For "Today", we compare against dailyTarget. For others, we just show the value.
|
|
const isToday = period.key === 'today';
|
|
const percentage = isToday
|
|
? Math.min((period.value / dailyTargetHours) * 100, 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div key={period.key} className="space-y-1.5">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-slate-500 dark:text-slate-400">{period.label}</span>
|
|
<span className="font-medium text-slate-700 dark:text-slate-300">{formatHours(period.value)}</span>
|
|
</div>
|
|
{isToday && (
|
|
<div className="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-indigo-500 transition-all duration-500 ease-out"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimeSpentSummary; |