267 lines
11 KiB
TypeScript
267 lines
11 KiB
TypeScript
import { useState, useMemo } from "react"
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import { api } from "../lib/api"
|
|
import { EmptyState } from "../components/EmptyState"
|
|
import { LoadingSpinner } from "../components/LoadingSpinner"
|
|
import type { TimeEntryInsert } from "@emberclone/shared"
|
|
|
|
export default function TimeEntries() {
|
|
const queryClient = useQueryClient()
|
|
|
|
const [formData, setFormData] = useState({
|
|
description: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
projectId: ""
|
|
})
|
|
|
|
const [filters, setFilters] = useState({
|
|
search: "",
|
|
from: "",
|
|
to: ""
|
|
})
|
|
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
|
|
|
const { data: entries, isLoading, isError } = useQuery({
|
|
queryKey: ["time-entries", filters.from, filters.to],
|
|
queryFn: () => api.listTimeEntries({
|
|
from: filters.from || undefined,
|
|
to: filters.to || undefined
|
|
})
|
|
})
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: Partial<TimeEntryInsert>) => api.createTimeEntry(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["time-entries"] })
|
|
setFormData({ description: "", startTime: "", endTime: "", projectId: "" })
|
|
}
|
|
})
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => api.deleteTimeEntry(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["time-entries"] })
|
|
}
|
|
})
|
|
|
|
const bulkDeleteMutation = useMutation({
|
|
mutationFn: (ids: string[]) => api.bulkDeleteTimeEntries(ids),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["time-entries"] })
|
|
setSelectedIds([])
|
|
}
|
|
})
|
|
|
|
const filteredEntries = useMemo(() => {
|
|
if (!entries) return []
|
|
return entries.filter(entry =>
|
|
entry.description?.toLowerCase().includes(filters.search.toLowerCase())
|
|
)
|
|
}, [entries, filters.search])
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
createMutation.mutate({
|
|
description: formData.description,
|
|
startTime: new Date(formData.startTime) as any,
|
|
endTime: new Date(formData.endTime) as any,
|
|
projectId: formData.projectId || undefined
|
|
})
|
|
}
|
|
|
|
const handleExport = () => {
|
|
const params = new URLSearchParams()
|
|
if (filters.from) params.append("from", filters.from)
|
|
if (filters.to) params.append("to", filters.to)
|
|
window.location.href = `/api/time-entries/export.csv?${params.toString()}`
|
|
}
|
|
|
|
const toggleSelectAll = () => {
|
|
if (selectedIds.length === filteredEntries.length) {
|
|
setSelectedIds([])
|
|
} else {
|
|
setSelectedIds(filteredEntries.map(e => e.id))
|
|
}
|
|
}
|
|
|
|
const toggleSelect = (id: string) => {
|
|
setSelectedIds(prev =>
|
|
prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
|
|
)
|
|
}
|
|
|
|
if (isError) return <div className="p-6 text-red-500">Error loading time entries.</div>
|
|
|
|
return (
|
|
<div className="p-6 max-w-6xl mx-auto space-y-8">
|
|
<header>
|
|
<h1 className="text-2xl font-bold text-gray-900">Time Tracking</h1>
|
|
<p className="text-gray-500">Manage your work logs and project hours</p>
|
|
</header>
|
|
|
|
<section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
|
<h2 className="text-lg font-semibold mb-4">Log New Entry</h2>
|
|
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="md:col-span-1">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
placeholder="What did you work on?"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Start</label>
|
|
<input
|
|
type="datetime-local"
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
|
value={formData.startTime}
|
|
onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">End</label>
|
|
<input
|
|
type="datetime-local"
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
|
value={formData.endTime}
|
|
onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Project ID</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
|
value={formData.projectId}
|
|
onChange={(e) => setFormData({ ...formData, projectId: e.target.value })}
|
|
placeholder="Optional"
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-4 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={createMutation.isPending}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
{createMutation.isPending ? "Saving..." : "Add Entry"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex flex-wrap gap-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Search descriptions..."
|
|
className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={filters.search}
|
|
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
|
/>
|
|
<input
|
|
type="date"
|
|
className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={filters.from}
|
|
onChange={(e) => setFilters({ ...filters, from: e.target.value })}
|
|
/>
|
|
<input
|
|
type="date"
|
|
className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={filters.to}
|
|
onChange={(e) => setFilters({ ...filters, to: e.target.value })}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleExport}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
|
>
|
|
Export CSV
|
|
</button>
|
|
</div>
|
|
|
|
{selectedIds.length > 0 && (
|
|
<div className="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg animate-in fade-in slide-in-from-top-2">
|
|
<span className="text-sm font-medium text-blue-800">
|
|
{selectedIds.length} entries selected
|
|
</span>
|
|
<button
|
|
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
|
disabled={bulkDeleteMutation.isPending}
|
|
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
{bulkDeleteMutation.isPending ? "Deleting..." : `Delete (${selectedIds.length})`}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12"><LoadingSpinner /></div>
|
|
) : filteredEntries.length === 0 ? (
|
|
<EmptyState message="No time entries found matching your filters." />
|
|
) : (
|
|
<div className="overflow-x-auto border border-gray-200 rounded-lg shadow-sm">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
|
|
<tr>
|
|
<th className="px-4 py-3 w-10">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
checked={selectedIds.length === filteredEntries.length && filteredEntries.length > 0}
|
|
onChange={toggleSelectAll}
|
|
/>
|
|
</th>
|
|
<th className="px-4 py-3">Description</th>
|
|
<th className="px-4 py-3">Start</th>
|
|
<th className="px-4 py-3">End</th>
|
|
<th className="px-4 py-3">Duration</th>
|
|
<th className="px-4 py-3 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
{filteredEntries.map((entry) => {
|
|
const durationMs = new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()
|
|
const durationHrs = (durationMs / (1000 * 60 * 60)).toFixed(2)
|
|
|
|
return (
|
|
<tr key={entry.id} className={`hover:bg-gray-50 transition-colors ${selectedIds.includes(entry.id) ? 'bg-blue-50/50' : ''}`}>
|
|
<td className="px-4 py-3">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
checked={selectedIds.includes(entry.id)}
|
|
onChange={() => toggleSelect(entry.id)}
|
|
/>
|
|
</td>
|
|
<td className="px-4 py-3 font-medium text-gray-900">{entry.description}</td>
|
|
<td className="px-4 py-3 text-gray-500">{new Date(entry.startTime).toLocaleString()}</td>
|
|
<td className="px-4 py-3 text-gray-500">{new Date(entry.endTime).toLocaleString()}</td>
|
|
<td className="px-4 py-3 text-gray-500">{durationHrs}h</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<button
|
|
onClick={() => deleteMutation.mutate(entry.id)}
|
|
className="text-red-600 hover:text-red-800 font-medium"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
} |