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/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>