feat(customer-csv-import): CSV-Import für Customers (admin) + Upload-UI [tsc:fail]

.phase8-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "time-entry-bulk-actions",
+  "current_feature": "customer-csv-import",
   "started_at": "2026-05-23T05:49:48.673340",
   "attempted_features": [
-    "recent-activity-widget"
+    "recent-activity-widget",
+    "time-entry-bulk-actions"
   ]
 }

GENERATION_LOG.md

@@ -928,3 +928,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
+- `05:53:42` **INFO**   Committed feature time-entry-bulk-actions
+- `05:53:42` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: customer-csv-import (2026-05-23 05:53:42)
+
+- `05:53:42` **INFO** Description: CSV-Import für Customers (admin) + Upload-UI
+- `05:53:42` **INFO**   Generating apps/api/src/routes/customers.ts (ERWEITERT — behalte alles. Füge POST /import (multipart-Upload CSV mit…)
+- `05:54:21` **INFO**     wrote 4351 chars in 39.2s (attempt 1)
+- `05:54:21` **INFO**   Generating apps/web/src/pages/Customers.tsx (ERWEITERT — behalte bestehendes UI. Füge 'CSV importieren' Button rech…)
+- `05:55:07` **INFO**     wrote 5630 chars in 45.3s (attempt 1)
+- `05:55:07` **INFO** Running tsc --noEmit on api…
+- `05:55:08` **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/routes/customers.ts

@@ -129,4 +129,44 @@ export default async function customerRoutes(fastify: FastifyInstance) {
 
     return reply.code(204).send()
   })
+
+  fastify.post("/import", async (request, reply) => {
+    const user = request.user as any
+    if (user?.role !== "admin") {
+      return reply.code(403).send({ message: "Admin privileges required" })
+    }
+
+    const data = await request.file()
+    if (!data) {
+      return reply.code(400).send({ message: "No file uploaded" })
+    }
+
+    const content = await data.toBuffer()
+    const csvText = content.toString("utf-8")
+    const lines = csvText.split(/\r?\n/).filter(line => line.trim())
+    
+    // Remove header
+    const rows = lines.slice(1)
+    let imported = 0
+    const errors: string[] = []
+
+    for (let i = 0; i < rows.length; i++) {
+      try {
+        const [name, activeStr] = rows[i].split(",").map(s => s.trim())
+        if (!name) throw new Error("Name is missing")
+        
+        const active = activeStr?.toLowerCase() === "true"
+
+        await db.insert(customers).values({
+          name,
+          active
+        })
+        imported++
+      } catch (err: any) {
+        errors.push(`Line ${i + 2}: ${err.message}`)
+      }
+    }
+
+    return { imported, errors }
+  })
 }

apps/web/src/pages/Customers.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react"
+import { useState, useRef } 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 fileInputRef = useRef<HTMLInputElement>(null)
 
   const { data: customers, isLoading, isError } = useQuery({
     queryKey: ["customers"],
@@ -26,20 +27,59 @@ export default function Customers() {
     }
   })
 
+  const importMutation = useMutation({
+    mutationFn: (file: File) => api.importCustomersCsv(file),
+    onSuccess: (data) => {
+      alert(`Import successful: ${data.count} customers imported.`)
+      queryClient.invalidateQueries({ queryKey: ["customers"] })
+    },
+    onError: (error: any) => {
+      alert(`Import failed: ${error.message || "Unknown error"}`)
+    }
+  })
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (!name.trim()) return
     createMutation.mutate(name)
   }
 
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      importMutation.mutate(file)
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ""
+    }
+  }
+
   if (isLoading) return <div className="p-6 text-gray-500">Loading customers...</div>
   if (isError) return <div className="p-6 text-red-500">Error loading customers.</div>
 
   return (
     <div className="p-6 max-w-6xl mx-auto space-y-8">
-      <header>
+      <header className="flex justify-between items-start">
-        <h1 className="text-2xl font-bold text-gray-900">Customers</h1>
+        <div>
-        <p className="text-gray-500">Manage your client database</p>
+          <h1 className="text-2xl font-bold text-gray-900">Customers</h1>
+          <p className="text-gray-500">Manage your client database</p>
+        </div>
+        <div className="flex gap-2">
+          <input
+            type="file"
+            accept=".csv"
+            className="hidden"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+          />
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={importMutation.isPending}
+            className="bg-white text-gray-700 border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50 transition-colors disabled:bg-gray-100 font-medium text-sm shadow-sm"
+          >
+            {importMutation.isPending ? "Importing..." : "Import CSV"}
+          </button>
+        </div>
       </header>
 
       <section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
@@ -70,8 +110,8 @@ export default function Customers() {
 
       <section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
         <table className="w-full text-left border-collapse">
-          <thead>
+          <thead className="bg-gray-50 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">Name</th>
               <th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
             </tr>
@@ -99,7 +139,7 @@ export default function Customers() {
             ) : (
               <tr>
                 <td colSpan={2} className="px-6 py-10 text-center text-gray-500">
-                  No customers found. Add your first customer above.
+                  No customers found.
                 </td>
               </tr>
             )}