gemma: generate apps/web/src/pages/TimeEntries.tsx
This commit is contained in:
parent
0a2d3042e8
commit
39e974d7a5
146
apps/web/src/pages/TimeEntries.tsx
Normal file
146
apps/web/src/pages/TimeEntries.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
import { useState } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { api } from "../lib/api"
|
||||
import { z } from "@rmpks/shared"
|
||||
|
||||
export default function TimeEntries() {
|
||||
const queryClient = useQueryClient()
|
||||
const [formData, setFormData] = useState({
|
||||
description: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
projectId: ""
|
||||
})
|
||||
|
||||
const { data: entries, isLoading, isError } = useQuery({
|
||||
queryKey: ["time-entries"],
|
||||
queryFn: () => api.listTimeEntries()
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: z.infer<typeof z.TimeEntrySchema>) => 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 handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
createMutation.mutate({
|
||||
description: formData.description,
|
||||
startTime: new Date(formData.startTime).toISOString(),
|
||||
endTime: new Date(formData.endTime).toISOString(),
|
||||
projectId: formData.projectId
|
||||
} as z.infer<typeof z.TimeEntrySchema>)
|
||||
}
|
||||
|
||||
if (isLoading) return <div className="p-6 text-gray-500">Loading entries...</div>
|
||||
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 className="flex items-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Add Entry"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">Description</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">Start</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">End</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{entries?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-8 text-center text-gray-400">No entries found.</td>
|
||||
</tr>
|
||||
)}
|
||||
{entries?.map((entry: any) => (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-gray-800">{entry.description}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
{new Date(entry.startTime).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
{new Date(entry.endTime).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm("Delete this entry?")) {
|
||||
deleteMutation.mutate(entry.id)
|
||||
}
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="text-red-500 hover:text-red-700 text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user