feat(time-entries-search-filter): Search + Date-Range-Filter in TimeEntries-Liste [tsc:ok]

.phase3-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [
     "toast-notifications",
-    "logout-everywhere"
+    "logout-everywhere",
+    "empty-loading-states"
   ],
-  "current_feature": "empty-loading-states",
+  "current_feature": "time-entries-search-filter",
   "started_at": "2026-05-23T04:57:10.921624"
 }

GENERATION_LOG.md

@@ -384,3 +384,13 @@ src/routes/customers.ts(22,36): error TS7006: Parameter
 - `04:58:00` **INFO**     wrote 453 chars in 4.2s (attempt 1)
 - `04:58:00` **INFO** Running tsc --noEmit on api…
 - `04:58:01` **INFO**   tsc clean ✓
+- `04:58:01` **INFO**   Committed feature empty-loading-states
+- `04:58:02` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: time-entries-search-filter (2026-05-23 04:58:02)
+
+- `04:58:02` **INFO** Description: Search + Date-Range-Filter in TimeEntries-Liste
+- `04:58:02` **INFO**   Generating apps/web/src/pages/TimeEntries.tsx (ERWEITERTE TimeEntries-Page. Behalte existing Create-Form + Liste. Füg…)
+- `04:59:09` **INFO**     wrote 8237 chars in 66.9s (attempt 1)
+- `04:59:09` **INFO** Running tsc --noEmit on api…
+- `04:59:10` **INFO**   tsc clean ✓

apps/web/src/pages/TimeEntries.tsx

@@ -1,10 +1,13 @@
-import { useState } from "react"
+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: "",
@@ -12,9 +15,18 @@ export default function TimeEntries() {
     projectId: ""
   })
 
+  const [filters, setFilters] = useState({
+    search: "",
+    from: "",
+    to: ""
+  })
+
   const { data: entries, isLoading, isError } = useQuery({
-    queryKey: ["time-entries"],
-    queryFn: () => api.listTimeEntries()
+    queryKey: ["time-entries", filters.from, filters.to],
+    queryFn: () => api.listTimeEntries({ 
+      from: filters.from || undefined, 
+      to: filters.to || undefined 
+    })
   })
 
   const createMutation = useMutation({
@@ -32,6 +44,13 @@ export default function TimeEntries() {
     }
   })
 
+  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({
@@ -42,7 +61,6 @@ export default function TimeEntries() {
     })
   }
 
-  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 (
@@ -98,7 +116,49 @@ export default function TimeEntries() {
         </form>
       </section>
 
-      <section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
+      <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>
+            <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..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+            />
+          </div>
+          <div className="w-full md:w-48">
+            <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">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"
+              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>
+            <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"
+              value={filters.to}
+              onChange={(e) => setFilters({ ...filters, to: e.target.value })}
+            />
+          </div>
+        </div>
+
+        {isLoading ? (
+          <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." 
+          />
+        ) : (
+          <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">
@@ -109,29 +169,20 @@ export default function TimeEntries() {
                 </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) => (
+                {filteredEntries.map((entry) => (
                   <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-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-right">
+                    <td className="px-6 py-4 text-sm text-right">
                       <button
-                    onClick={() => {
-                      if (confirm("Delete this entry?")) {
-                        deleteMutation.mutate(entry.id)
-                      }
-                    }}
+                        onClick={() => deleteMutation.mutate(entry.id)}
                         disabled={deleteMutation.isPending}
-                    className="text-red-500 hover:text-red-700 text-sm font-medium disabled:opacity-50"
+                        className="text-red-600 hover:text-red-800 font-medium disabled:text-gray-400"
                       >
                         Delete
                       </button>
@@ -140,6 +191,8 @@ export default function TimeEntries() {
                 ))}
               </tbody>
             </table>
+          </div>
+        )}
       </section>
     </div>
   )