feat(csv-export-time-entries): CSV-Export-Endpoint + Button in TimeEntries-Page [tsc:ok]

.phase4-state.json

@@ -1,5 +1,7 @@
 {
-  "completed_features": [],
+  "completed_features": [
-  "current_feature": "admin-user-management",
+    "admin-user-management"
+  ],
+  "current_feature": "csv-export-time-entries",
   "started_at": "2026-05-23T05:10:51.482879"
 }

GENERATION_LOG.md

@@ -471,3 +471,15 @@ undefined
 - `05:12:47` **INFO**     wrote 9929 chars in 82.5s (attempt 1)
 - `05:12:47` **INFO** Running tsc --noEmit on api…
 - `05:12:48` **INFO**   tsc clean ✓
+- `05:12:48` **INFO**   Committed feature admin-user-management
+- `05:12:49` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: csv-export-time-entries (2026-05-23 05:12:49)
+
+- `05:12:49` **INFO** Description: CSV-Export-Endpoint + Button in TimeEntries-Page
+- `05:12:49` **INFO**   Generating apps/api/src/routes/time-entries.ts (ERWEITERTE time-entries.ts — behalte alle bestehenden Routes (CRUD + r…)
+- `05:13:52` **INFO**     wrote 6894 chars in 63.2s (attempt 1)
+- `05:13:52` **INFO**   Generating apps/web/src/pages/TimeEntries.tsx (ERWEITERT — behalte Form + Filter + Liste. Füge Export-Button im Filte…)
+- `05:15:03` **INFO**     wrote 8846 chars in 71.0s (attempt 1)
+- `05:15:03` **INFO** Running tsc --noEmit on api…
+- `05:15:04` **INFO**   tsc clean ✓

apps/api/src/routes/time-entries.ts

@@ -48,7 +48,7 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
     const entries = await db
       .select()
       .from(timeEntries)
-      .where(and(...filters))
+      .where(filters.length ? and(...filters) : undefined as any)
       .orderBy(timeEntries.startTime)
 
     return entries
@@ -179,13 +179,13 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
       return reply.code(404).send({ message: "Time entry not found" })
     }
 
-    const updateData: any = { ...body }
-    if (body.startTime) updateData.startTime = new Date(body.startTime)
-    if (body.endTime) updateData.endTime = body.endTime ? new Date(body.endTime) : null
-
     const [updated] = await db
       .update(timeEntries)
-      .set(updateData)
+      .set({
+        ...body,
+        startTime: body.startTime ? new Date(body.startTime) : undefined,
+        endTime: body.endTime ? new Date(body.endTime) : (body.endTime === null ? null : undefined)
+      })
       .where(eq(timeEntries.id, id))
       .returning()
 
@@ -212,7 +212,49 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
     }
 
     await db.delete(timeEntries).where(eq(timeEntries.id, id))
-
     return reply.code(204).send()
   })
+
+  fastify.get("/export", async (request, reply) => {
+    const { from, to } = request.query as { from?: string; to?: string }
+    const user = request.user as { sub: string; role: string }
+
+    const filters = []
+    if (user.role !== "admin") {
+      filters.push(eq(timeEntries.userId, user.sub))
+    }
+    if (from) {
+      filters.push(gte(timeEntries.startTime, new Date(from)))
+    }
+    if (to) {
+      filters.push(lte(timeEntries.startTime, new Date(to)))
+    }
+
+    const entries = await db
+      .select()
+      .from(timeEntries)
+      .where(filters.length ? and(...filters) : undefined as any)
+      .orderBy(timeEntries.startTime)
+
+    const header = "id,description,projectId,startTime,endTime,durationMinutes\n"
+    const rows = entries.map(e => {
+      const start = new Date(e.startTime)
+      const end = e.endTime ? new Date(e.endTime) : null
+      const duration = end ? Math.round((end.getTime() - start.getTime()) / 60000) : ""
+      
+      return [
+        e.id,
+        `"${e.description.replace(/"/g, '""')}"`,
+        e.projectId || "",
+        start.toISOString(),
+        end ? end.toISOString() : "",
+        duration
+      ].join(",")
+    }).join("\n")
+
+    reply
+      .header("Content-Type", "text/csv")
+      .header("Content-Disposition", "attachment; filename=time-entries.csv")
+      .send(header + rows)
+  })
 }

apps/web/src/pages/TimeEntries.tsx

@@ -61,6 +61,13 @@ export default function TimeEntries() {
     })
   }
 
+  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()}`
+  }
+
   if (isError) return <div className="p-6 text-red-500">Error loading time entries.</div>
 
   return (
@@ -105,90 +112,95 @@ export default function TimeEntries() {
             />
           </div>
           <div className="flex items-end">
-            <button
+            <button 
-              type="submit"
+              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"
+              className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50"
             >
-              {createMutation.isPending ? "Saving..." : "Add Entry"}
+              {createMutation.isPending ? "Saving..." : "Save Entry"}
             </button>
           </div>
         </form>
       </section>
 
       <section className="space-y-4">
-        <div className="flex flex-col md:flex-row gap-4 items-end bg-gray-50 p-4 rounded-lg border border-gray-200">
+        <div className="flex flex-col md:flex-row gap-4 items-end justify-between bg-gray-50 p-4 rounded-lg border border-gray-200">
-          <div className="flex-1 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
-            <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Search</label>
+            <div>
-            <input
+              <label className="block text-xs font-medium text-gray-500 mb-1 uppercase">Search</label>
-              type="text"
+              <input
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
+                type="text"
-              placeholder="Filter by description..."
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
-              value={filters.search}
+                value={filters.search}
-              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+                onChange={(e) => setFilters({ ...filters, search: e.target.value })}
-            />
+                placeholder="Filter by description..."
-          </div>
+              />
-          <div className="w-full md:w-48">
+            </div>
-            <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">From</label>
+            <div>
-            <input
+              <label className="block text-xs font-medium text-gray-500 mb-1 uppercase">From</label>
-              type="date"
+              <input
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
+                type="date"
-              value={filters.from}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
-              onChange={(e) => setFilters({ ...filters, from: e.target.value })}
+                value={filters.from}
-            />
+                onChange={(e) => setFilters({ ...filters, from: e.target.value })}
-          </div>
+              />
-          <div className="w-full md:w-48">
+            </div>
-            <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">To</label>
+            <div>
-            <input
+              <label className="block text-xs font-medium text-gray-500 mb-1 uppercase">To</label>
-              type="date"
+              <input
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
+                type="date"
-              value={filters.to}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
-              onChange={(e) => setFilters({ ...filters, to: e.target.value })}
+                value={filters.to}
-            />
+                onChange={(e) => setFilters({ ...filters, to: e.target.value })}
+              />
+            </div>
           </div>
+          <button 
+            onClick={handleExport}
+            className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors"
+          >
+            Export CSV
+          </button>
         </div>
 
         {isLoading ? (
-          <div className="flex justify-center py-12">
+          <div className="flex justify-center py-12"><LoadingSpinner /></div>
-            <LoadingSpinner />
-          </div>
         ) : filteredEntries.length === 0 ? (
-          <EmptyState 
+          <EmptyState message="No time entries found matching your criteria." />
-            title="No time entries found" 
-            description="Try adjusting your filters or add a new entry above." 
-          />
         ) : (
-          <div className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="overflow-x-auto rounded-lg border border-gray-200">
-            <table className="w-full text-left border-collapse">
+            <table className="w-full text-left text-sm">
-              <thead>
+              <thead className="bg-gray-50 text-gray-600 font-medium border-b border-gray-200">
-                <tr className="bg-gray-50 border-b border-gray-200">
+                <tr>
-                  <th className="px-6 py-3 text-sm font-semibold text-gray-600">Description</th>
+                  <th className="px-4 py-3">Description</th>
-                  <th className="px-6 py-3 text-sm font-semibold text-gray-600">Start</th>
+                  <th className="px-4 py-3">Start</th>
-                  <th className="px-6 py-3 text-sm font-semibold text-gray-600">End</th>
+                  <th className="px-4 py-3">End</th>
-                  <th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
+                  <th className="px-4 py-3 text-right">Duration</th>
+                  <th className="px-4 py-3 text-right">Actions</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200">
-                {filteredEntries.map((entry) => (
+                {filteredEntries.map((entry) => {
-                  <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
+                  const duration = entry.endTime && entry.startTime 
-                    <td className="px-6 py-4 text-sm text-gray-900">{entry.description}</td>
+                    ? (new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()) / 3600000 
-                    <td className="px-6 py-4 text-sm text-gray-500">
+                    : 0
-                      {new Date(entry.startTime).toLocaleString()}
+                  return (
-                    </td>
+                    <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
-                    <td className="px-6 py-4 text-sm text-gray-500">
+                      <td className="px-4 py-3 font-medium text-gray-900">{entry.description}</td>
-                      {new Date(entry.endTime).toLocaleString()}
+                      <td className="px-4 py-3 text-gray-500">{new Date(entry.startTime).toLocaleString()}</td>
-                    </td>
+                      <td className="px-4 py-3 text-gray-500">{new Date(entry.endTime).toLocaleString()}</td>
-                    <td className="px-6 py-4 text-sm text-right">
+                      <td className="px-4 py-3 text-right text-gray-600">{duration.toFixed(2)}h</td>
-                      <button
+                      <td className="px-4 py-3 text-right">
-                        onClick={() => deleteMutation.mutate(entry.id)}
+                        <button 
-                        disabled={deleteMutation.isPending}
+                          onClick={() => deleteMutation.mutate(entry.id)}
-                        className="text-red-600 hover:text-red-800 font-medium disabled:text-gray-400"
+                          className="text-red-500 hover:text-red-700 font-medium"
-                      >
+                        >
-                        Delete
+                          Delete
-                      </button>
+                        </button>
-                    </td>
+                      </td>
-                  </tr>
+                    </tr>
-                ))}
+                  )
+                })}
               </tbody>
             </table>
           </div>