oxofrmbl/EmberClone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dennis (via Claude+Gemma) 2026-05-23 05:15:04 +02:00
parent 6d4213a31c
commit c3ae8a1d1d
4 changed files with 144 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.phase4-state.json
View File

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

12
GENERATION_LOG.md
View File

@ -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 ✓

56
apps/api/src/routes/time-entries.ts
View File

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

92
apps/web/src/pages/TimeEntries.tsx
View File

@ -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 (
@ -108,87 +115,92 @@ export default function TimeEntries() {
<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"
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-1 w-full">
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Search</label>
<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="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
<div>
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">Search</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"
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}
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
placeholder="Filter by description..."
/>
</div>
<div className="w-full md:w-48">
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">From</label>
<div>
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">From</label>
<input
type="date"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
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.from}
onChange={(e) => setFilters({ ...filters, from: e.target.value })}
/>
</div>
<div className="w-full md:w-48">
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">To</label>
<div>
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">To</label>
<input
type="date"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
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.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">
<LoadingSpinner />
</div>
<div className="flex justify-center py-12"><LoadingSpinner /></div>
) : filteredEntries.length === 0 ? (
<EmptyState
title="No time entries found"
description="Try adjusting your filters or add a new entry above."
/>
<EmptyState message="No time entries found matching your criteria." />
) : (
<div 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>
<div className="overflow-x-auto rounded-lg border border-gray-200">
<table className="w-full text-left text-sm">
<thead className="bg-gray-50 text-gray-600 font-medium border-b border-gray-200">
<tr>
<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 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) => {
const duration = entry.endTime && entry.startTime
? (new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()) / 3600000
: 0
return (
<tr key={entry.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 text-sm text-gray-900">{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-sm text-right">
<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-right text-gray-600">{duration.toFixed(2)}h</td>
<td className="px-4 py-3 text-right">
<button
onClick={() => deleteMutation.mutate(entry.id)}
disabled={deleteMutation.isPending}
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
</button>
</td>
</tr>
))}
)
})}
</tbody>
</table>
</div>