feat(customer-tags): Tags-Feld bei Customers + Filter-by-Tag [tsc:fail]

.phase10-state.json

@@ -1,5 +1,8 @@
 {
   "completed_features": [],
-  "current_feature": "markdown-notes-time-entry",
+  "current_feature": "customer-tags",
-  "started_at": "2026-05-23T06:10:51.530595"
+  "started_at": "2026-05-23T06:10:51.530595",
+  "attempted_features": [
+    "markdown-notes-time-entry"
+  ]
 }

GENERATION_LOG.md

@@ -1170,3 +1170,22 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `06:13:06` **INFO**   Committed feature markdown-notes-time-entry
+- `06:13:06` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: customer-tags (2026-05-23 06:13:06)
+
+- `06:13:06` **INFO** Description: Tags-Feld bei Customers + Filter-by-Tag
+- `06:13:06` **INFO**   Generating apps/api/src/db/schema.ts (ERWEITERT — füge `tags: text('tags').array().notNull().default([])` Sp…)
+- `06:13:33` **INFO**     wrote 3052 chars in 26.3s (attempt 1)
+- `06:13:33` **INFO**   Generating apps/web/src/pages/Customers.tsx (ERWEITERT — füge Tags-Input (kommagetrennt) zum Create-Form. Zeige Tag…)
+- `06:14:36` **INFO**     wrote 7956 chars in 63.5s (attempt 1)
+- `06:14:36` **INFO** Running tsc --noEmit on api…
+- `06:14:38` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/api/src/db/schema.ts

@@ -18,6 +18,7 @@ export const users = pgTable("users", {
 export const customers = pgTable("customers", {
   id: uuid("id").primaryKey().defaultRandom(),
   name: text("name").notNull(),
+  tags: text("tags").array().notNull().default([]),
   active: boolean("active").notNull().default(true),
   createdAt: timestamp("created_at").notNull().defaultNow()
 })

apps/web/src/pages/Customers.tsx

@@ -1,10 +1,12 @@
-import { useState, useRef } from "react"
+import { useState, useRef, useMemo } from "react"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { api } from "../lib/api"
 
 export default function Customers() {
   const queryClient = useQueryClient()
   const [name, setName] = useState("")
+  const [tags, setTags] = useState("")
+  const [filterTag, setFilterTag] = useState("")
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const { data: customers, isLoading, isError } = useQuery({
@@ -13,10 +15,11 @@ export default function Customers() {
   })
 
   const createMutation = useMutation({
-    mutationFn: (name: string) => api.createCustomer({ name }),
+    mutationFn: (payload: { name: string; tags: string[] }) => api.createCustomer(payload),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["customers"] })
       setName("")
+      setTags("")
     }
   })
 
@@ -38,10 +41,20 @@ export default function Customers() {
     }
   })
 
+  const filteredCustomers = useMemo(() => {
+    if (!customers) return []
+    if (!filterTag.trim()) return customers
+    const search = filterTag.toLowerCase()
+    return customers.filter(c => 
+      c.tags?.some(t => t.toLowerCase().includes(search))
+    )
+  }, [customers, filterTag])
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (!name.trim()) return
-    createMutation.mutate(name)
+    const tagsArray = tags.split(",").map(t => t.trim()).filter(Boolean)
+    createMutation.mutate({ name, tags: tagsArray })
   }
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -84,7 +97,7 @@ export default function Customers() {
 
       <section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
         <h2 className="text-lg font-semibold mb-4">Add New Customer</h2>
-        <form onSubmit={handleSubmit} className="flex gap-4">
+        <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4">
           <div className="flex-1">
             <label className="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
             <input
@@ -96,11 +109,21 @@ export default function Customers() {
               placeholder="Enter company or person name"
             />
           </div>
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</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"
+              value={tags}
+              onChange={(e) => setTags(e.target.value)}
+              placeholder="VIP, Enterprise, Lead..."
+            />
+          </div>
           <div className="flex items-end">
             <button
               type="submit"
               disabled={createMutation.isPending}
-              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium"
+              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium h-[42px]"
             >
               {createMutation.isPending ? "Saving..." : "Add Customer"}
             </button>
@@ -108,23 +131,47 @@ export default function Customers() {
         </form>
       </section>
 
-      <section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
+      <section className="space-y-4">
-        <table className="w-full text-left border-collapse">
+        <div className="flex items-center gap-2">
-          <thead className="bg-gray-50 border-b border-gray-200">
+          <span className="text-sm font-medium text-gray-600">Filter by tag:</span>
-            <tr>
+          <input
-              <th className="px-6 py-3 text-sm font-semibold text-gray-600">Name</th>
+            type="text"
-              <th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
+            className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64"
-            </tr>
+            value={filterTag}
-          </thead>
+            onChange={(e) => setFilterTag(e.target.value)}
-          <tbody className="divide-y divide-gray-200">
+            placeholder="Search tags..."
-            {customers && customers.length > 0 ? (
+          />
-              customers.map((customer: any) => (
+        </div>
+
+        <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-xs font-semibold text-gray-600 uppercase tracking-wider">Customer</th>
+                <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Tags</th>
+                <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {filteredCustomers.map((customer) => (
                 <tr key={customer.id} className="hover:bg-gray-50 transition-colors">
-                  <td className="px-6 py-4 text-sm text-gray-900">{customer.name}</td>
+                  <td className="px-6 py-4 text-sm font-medium text-gray-900">{customer.name}</td>
+                  <td className="px-6 py-4">
+                    <div className="flex flex-wrap gap-1">
+                      {customer.tags?.map((tag) => (
+                        <span 
+                          key={tag} 
+                          className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full border border-blue-200"
+                        >
+                          {tag}
+                        </span>
+                      )) || <span className="text-gray-400 text-xs italic">No tags</span>}
+                    </div>
+                  </td>
                   <td className="px-6 py-4 text-right">
                     <button
                       onClick={() => {
-                        if (confirm("Are you sure you want to delete this customer?")) {
+                        if (confirm(`Delete ${customer.name}?`)) {
                           deleteMutation.mutate(customer.id)
                         }
                       }}
@@ -135,16 +182,17 @@ export default function Customers() {
                     </button>
                   </td>
                 </tr>
-              ))
+              ))}
-            ) : (
+              {filteredCustomers.length === 0 && (
-              <tr>
+                <tr>
-                <td colSpan={2} className="px-6 py-10 text-center text-gray-500">
+                  <td colSpan={3} className="px-6 py-10 text-center text-gray-500 italic">
-                  No customers found.
+                    No customers found matching the filter.
-                </td>
+                  </td>
-              </tr>
+                </tr>
-            )}
+              )}
-          </tbody>
+            </tbody>
-        </table>
+          </table>
+        </div>
       </section>
     </div>
   )