Fix: Verschleißteil-Formular Datumsvalidierung und Schriftfarbe

- installDate Schema akzeptiert jetzt YYYY-MM-DD Format (HTML date input)
- maintenanceHistorySchema date akzeptiert jetzt YYYY-MM-DD Format
- Transform konvertiert Datumsstrings automatisch zu Date-Objekten
- API-Routes verwenden validierte Date-Objekte direkt
- Alle Formularfelder haben jetzt schwarze Schriftfarbe (text-black)
- Optional-Felder werden getrimmt (brand, model, notes)

app/api/bikes/[id]/parts/route.ts

@@ -48,7 +48,7 @@ export async function POST(
         type: validatedData.type,
         brand: validatedData.brand,
         model: validatedData.model,
-        installDate: new Date(validatedData.installDate),
+        installDate: validatedData.installDate,
         installMileage: validatedData.installMileage,
         serviceInterval: validatedData.serviceInterval,
         status: validatedData.status,

app/api/parts/[id]/maintenance/route.ts

@@ -38,7 +38,7 @@ export async function POST(
     const history = await prisma.maintenanceHistory.create({
       data: {
         wearPartId: params.id,
-        date: new Date(validatedData.date),
+        date: validatedData.date,
         mileage: validatedData.mileage,
         action: validatedData.action,
         notes: validatedData.notes,

app/components/BikeForm.tsx

@@ -93,7 +93,7 @@ export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
             onChange={(e) =>
               setFormData({ ...formData, name: e.target.value })
             }
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             required
           />
           {errors.name && (
@@ -112,7 +112,7 @@ export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
               onChange={(e) =>
                 setFormData({ ...formData, brand: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             />
           </div>
 
@@ -126,7 +126,7 @@ export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
               onChange={(e) =>
                 setFormData({ ...formData, model: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             />
           </div>
         </div>
@@ -141,7 +141,7 @@ export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
             onChange={(e) =>
               setFormData({ ...formData, purchaseDate: e.target.value })
             }
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
           />
         </div>
 
@@ -155,7 +155,7 @@ export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
               setFormData({ ...formData, notes: e.target.value })
             }
             rows={3}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
           />
         </div>
 

app/components/MaintenanceForm.tsx

@@ -105,7 +105,7 @@ export default function MaintenanceForm({
               onChange={(e) =>
                 setFormData({ ...formData, date: e.target.value })
               }
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             />
             {errors.date && (
@@ -124,7 +124,7 @@ export default function MaintenanceForm({
                 setFormData({ ...formData, mileage: Number(e.target.value) })
               }
               min="0"
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             />
             {errors.mileage && (
@@ -143,7 +143,7 @@ export default function MaintenanceForm({
               onChange={(e) =>
                 setFormData({ ...formData, action: e.target.value })
               }
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             >
               {maintenanceActions.map((action) => (
@@ -169,7 +169,7 @@ export default function MaintenanceForm({
                 setFormData({ ...formData, cost: e.target.value })
               }
               min="0"
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             />
           </div>
         </div>
@@ -184,7 +184,7 @@ export default function MaintenanceForm({
               setFormData({ ...formData, notes: e.target.value })
             }
             rows={2}
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
           />
         </div>
 

app/components/WearPartForm.tsx

@@ -135,7 +135,7 @@ export default function WearPartForm({
           <select
             value={formData.type}
             onChange={(e) => setFormData({ ...formData, type: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             required
           >
             {wearPartTypes.map((type) => (
@@ -160,7 +160,7 @@ export default function WearPartForm({
               onChange={(e) =>
                 setFormData({ ...formData, brand: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             />
           </div>
 
@@ -174,7 +174,7 @@ export default function WearPartForm({
               onChange={(e) =>
                 setFormData({ ...formData, model: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             />
           </div>
         </div>
@@ -190,7 +190,7 @@ export default function WearPartForm({
               onChange={(e) =>
                 setFormData({ ...formData, installDate: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             />
             {errors.installDate && (
@@ -212,7 +212,7 @@ export default function WearPartForm({
                 })
               }
               min="0"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             />
             {errors.installMileage && (
@@ -238,7 +238,7 @@ export default function WearPartForm({
                 })
               }
               min="1"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
               required
             />
             {errors.serviceInterval && (
@@ -257,7 +257,7 @@ export default function WearPartForm({
               onChange={(e) =>
                 setFormData({ ...formData, status: e.target.value })
               }
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
             >
               {wearPartStatuses.map((status) => (
                 <option key={status} value={status}>
@@ -280,7 +280,7 @@ export default function WearPartForm({
               setFormData({ ...formData, cost: e.target.value })
             }
             min="0"
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
           />
         </div>
 
@@ -294,7 +294,7 @@ export default function WearPartForm({
               setFormData({ ...formData, notes: e.target.value })
             }
             rows={3}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
           />
         </div>
 

lib/validations.ts

@@ -72,22 +72,60 @@ export const bikeSchema = z.object({
 export const wearPartSchema = z.object({
   bikeId: z.string().min(1, 'Fahrrad-ID ist erforderlich'),
   type: WearPartType,
-  brand: z.string().optional(),
+  brand: z.string().optional().transform((val) => val?.trim() || undefined),
-  model: z.string().optional(),
+  model: z.string().optional().transform((val) => val?.trim() || undefined),
-  installDate: z.string().datetime().or(z.date()),
+  installDate: z
+    .union([z.date(), z.string()])
+    .transform((val) => {
+      if (!val) return new Date() // Default to today if not provided
+      if (val instanceof Date) {
+        return isNaN(val.getTime()) ? new Date() : val
+      }
+      if (typeof val === 'string') {
+        // Handle YYYY-MM-DD format (from HTML date input)
+        if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
+          const date = new Date(val + 'T00:00:00.000Z')
+          return isNaN(date.getTime()) ? new Date() : date
+        }
+        // Handle ISO datetime format or any other parseable date string
+        const date = new Date(val)
+        return isNaN(date.getTime()) ? new Date() : date
+      }
+      return new Date()
+    })
+    .pipe(z.date()),
   installMileage: z.number().int().min(0).default(0),
   serviceInterval: z.number().int().min(1, 'Service-Intervall muss mindestens 1 km sein'),
   status: WearPartStatus.default('ACTIVE'),
   cost: z.number().positive().optional(),
-  notes: z.string().optional(),
+  notes: z.string().optional().transform((val) => val?.trim() || undefined),
 })
 
 export const maintenanceHistorySchema = z.object({
   wearPartId: z.string().min(1, 'Verschleißteil-ID ist erforderlich'),
-  date: z.string().datetime().or(z.date()),
+  date: z
+    .union([z.date(), z.string()])
+    .transform((val) => {
+      if (!val) return new Date() // Default to today if not provided
+      if (val instanceof Date) {
+        return isNaN(val.getTime()) ? new Date() : val
+      }
+      if (typeof val === 'string') {
+        // Handle YYYY-MM-DD format (from HTML date input)
+        if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
+          const date = new Date(val + 'T00:00:00.000Z')
+          return isNaN(date.getTime()) ? new Date() : date
+        }
+        // Handle ISO datetime format or any other parseable date string
+        const date = new Date(val)
+        return isNaN(date.getTime()) ? new Date() : date
+      }
+      return new Date()
+    })
+    .pipe(z.date()),
   mileage: z.number().int().min(0),
   action: MaintenanceAction,
-  notes: z.string().optional(),
+  notes: z.string().optional().transform((val) => val?.trim() || undefined),
   cost: z.number().positive().optional(),
 })