feat: Add inspiration photo upload functionality to booking system

- Extend booking schema with optional inspirationPhoto field (Base64 encoded)
- Implement photo upload in booking form with file validation (max 5MB, image files only)
- Add photo preview with remove functionality in booking form
- Create thumbnail display in admin bookings management
- Implement photo popup modal for full-size image viewing
- Add inspiration photo column to bookings table
- Include photo upload in form reset after successful booking
- Add user-friendly photo upload UI with drag-and-drop styling

Features:
- Optional photo upload for customer inspiration/reference
- File size validation (5MB limit)
- File type validation (images only)
- Photo preview in booking form
- Thumbnail display in admin panel
- Full-size popup modal for detailed viewing
- Responsive design with hover effects
- German localization throughout

Changes:
- booking-form.tsx: Add photo upload UI and functionality
- admin-bookings.tsx: Add photo thumbnails and popup modal
- bookings.ts: Extend schema with inspirationPhoto field
This commit is contained in:
2025-09-30 11:50:37 +02:00
parent aeb32da6c2
commit bcfc481578
3 changed files with 140 additions and 0 deletions

View File

@@ -22,6 +22,7 @@ const BookingSchema = z.object({
appointmentTime: z.string(), // HH:MM format
status: z.enum(["pending", "confirmed", "cancelled", "completed"]),
notes: z.string().optional(),
inspirationPhoto: z.string().optional(), // Base64 encoded image data
createdAt: z.string(),
slotId: z.string().optional(),
});