gemma: generate apps/web/src/pages/TimeEntries.tsx

apps/web/src/pages/TimeEntries.tsx

@@ -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>
+  )
+}