feat(customer-archive): Soft-archive von Customers (toggle active=false) + Filter [tsc:fail]

.phase11-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "time-entry-csv-import",
+  "current_feature": "customer-archive",
   "started_at": "2026-05-23T06:21:46.924268",
   "attempted_features": [
-    "onboarding-tour"
+    "onboarding-tour",
+    "time-entry-csv-import"
   ]
 }

GENERATION_LOG.md

@@ -1344,3 +1344,20 @@ 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:26:17` **INFO**   Committed feature time-entry-csv-import
+- `06:26:17` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: customer-archive (2026-05-23 06:26:17)
+
+- `06:26:17` **INFO** Description: Soft-archive von Customers (toggle active=false) + Filter
+- `06:26:17` **INFO**   Generating apps/web/src/pages/Customers.tsx (ERWEITERT — füge Archive-Button (statt Delete) pro Customer (PATCH act…)
+- `06:27:27` **INFO**     wrote 8791 chars in 70.1s (attempt 1)
+- `06:27:27` **INFO** Running tsc --noEmit on api…
+- `06:27:29` **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/web/src/pages/Customers.tsx

@@ -7,6 +7,7 @@ export default function Customers() {
   const [name, setName] = useState("")
   const [tags, setTags] = useState("")
   const [filterTag, setFilterTag] = useState("")
+  const [showArchived, setShowArchived] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const { data: customers, isLoading, isError } = useQuery({
@@ -23,8 +24,8 @@ export default function Customers() {
     }
   })
 
-  const deleteMutation = useMutation({
+  const archiveMutation = useMutation({
-    mutationFn: (id: string) => api.deleteCustomer(id),
+    mutationFn: (id: string) => api.updateCustomer(id, { active: false }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["customers"] })
     }
@@ -43,12 +44,16 @@ export default function Customers() {
 
   const filteredCustomers = useMemo(() => {
     if (!customers) return []
-    if (!filterTag.trim()) return customers
+    
-    const search = filterTag.toLowerCase()
+    return customers.filter(c => {
-    return customers.filter(c => 
+      const matchesTag = !filterTag.trim() || 
-      c.tags?.some(t => t.toLowerCase().includes(search))
+        c.tags?.some(t => t.toLowerCase().includes(filterTag.toLowerCase()))
-    )
+      
-  }, [customers, filterTag])
+      const matchesActive = showArchived || c.active !== false
+      
+      return matchesTag && matchesActive
+    })
+  }, [customers, filterTag, showArchived])
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -116,79 +121,93 @@ export default function Customers() {
               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..."
+              placeholder="e.g. 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 h-[42px]"
+              className="w-full md:w-auto bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors font-medium text-sm disabled:bg-blue-300"
             >
-              {createMutation.isPending ? "Saving..." : "Add Customer"}
+              {createMutation.isPending ? "Adding..." : "Add Customer"}
             </button>
           </div>
         </form>
       </section>
 
       <section className="space-y-4">
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-between bg-gray-50 p-4 rounded-lg border border-gray-200">
-          <span className="text-sm font-medium text-gray-600">Filter by tag:</span>
+          <div className="relative w-full md:w-72">
             <input
               type="text"
-            className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64"
+              placeholder="Filter by tag..."
+              className="w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none text-sm"
               value={filterTag}
               onChange={(e) => setFilterTag(e.target.value)}
-            placeholder="Search tags..."
             />
           </div>
+          <label className="flex items-center gap-2 cursor-pointer select-none text-sm text-gray-600">
+            <input
+              type="checkbox"
+              className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              checked={showArchived}
+              onChange={(e) => setShowArchived(e.target.checked)}
+            />
+            Show archived customers
+          </label>
+        </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">
+              <tr className="bg-gray-50 border-b border-gray-200 text-xs uppercase text-gray-500 font-semibold">
-                <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Customer</th>
+                <th className="px-6 py-3">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">Tags</th>
-                <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                <th className="px-6 py-3 text-right">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200">
-              {filteredCustomers.map((customer) => (
+              {filteredCustomers.length === 0 ? (
-                <tr key={customer.id} className="hover:bg-gray-50 transition-colors">
+                <tr>
-                  <td className="px-6 py-4 text-sm font-medium text-gray-900">{customer.name}</td>
+                  <td colSpan={3} className="px-6 py-10 text-center text-gray-400 italic">
+                    No customers found.
+                  </td>
+                </tr>
+              ) : (
+                filteredCustomers.map((customer) => (
+                  <tr 
+                    key={customer.id} 
+                    className={`hover:bg-gray-50 transition-colors ${customer.active === false ? "opacity-50 bg-gray-50" : ""}`}
+                  >
+                    <td className="px-6 py-4 font-medium text-gray-900">
+                      {customer.name}
+                      {customer.active === false && (
+                        <span className="ml-2 text-[10px] bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded uppercase font-bold">Archived</span>
+                      )}
+                    </td>
                     <td className="px-6 py-4">
                       <div className="flex flex-wrap gap-1">
-                      {customer.tags?.map((tag) => (
+                        {customer.tags?.map(tag => (
-                        <span 
+                          <span key={tag} className="bg-blue-50 text-blue-600 text-xs px-2 py-0.5 rounded-full border border-blue-100">
-                          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">
+                      {customer.active !== false && (
                         <button
-                      onClick={() => {
+                          onClick={() => archiveMutation.mutate(customer.id)}
-                        if (confirm(`Delete ${customer.name}?`)) {
+                          disabled={archiveMutation.isPending}
-                          deleteMutation.mutate(customer.id)
+                          className="text-gray-500 hover:text-red-600 text-sm font-medium transition-colors disabled:text-gray-300"
-                        }
-                      }}
-                      disabled={deleteMutation.isPending}
-                      className="text-red-600 hover:text-red-800 text-sm font-medium disabled:text-gray-400"
                         >
-                      Delete
+                          Archive
                         </button>
+                      )}
                     </td>
                   </tr>
-              ))}
+                ))
-              {filteredCustomers.length === 0 && (
-                <tr>
-                  <td colSpan={3} className="px-6 py-10 text-center text-gray-500 italic">
-                    No customers found matching the filter.
-                  </td>
-                </tr>
               )}
             </tbody>
           </table>