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

src/client/components/admin-bookings.tsx

@@ -4,6 +4,8 @@ import { queryClient } from "@/client/rpc-client";
 
 export function AdminBookings() {
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [selectedPhoto, setSelectedPhoto] = useState<string>("");
+  const [showPhotoModal, setShowPhotoModal] = useState(false);
 
   const { data: bookings } = useQuery(
     queryClient.bookings.live.list.experimental_liveOptions()
@@ -31,6 +33,16 @@ export function AdminBookings() {
     }
   };
 
+  const openPhotoModal = (photoData: string) => {
+    setSelectedPhoto(photoData);
+    setShowPhotoModal(true);
+  };
+
+  const closePhotoModal = () => {
+    setShowPhotoModal(false);
+    setSelectedPhoto("");
+  };
+
   const filteredBookings = bookings?.filter(booking => 
     selectedDate ? booking.appointmentDate === selectedDate : true
   ).sort((a, b) => {
@@ -117,6 +129,9 @@ export function AdminBookings() {
               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Date & Time
               </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Inspiration
+              </th>
               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Status
               </th>
@@ -148,6 +163,22 @@ export function AdminBookings() {
                     <div className="text-xs text-gray-500">Slot-ID: {booking.slotId}</div>
                   )}
                 </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {booking.inspirationPhoto ? (
+                    <button
+                      onClick={() => openPhotoModal(booking.inspirationPhoto!)}
+                      className="block"
+                    >
+                      <img
+                        src={booking.inspirationPhoto}
+                        alt="Inspiration"
+                        className="w-12 h-12 object-cover rounded-lg border border-gray-200 hover:border-pink-300 cursor-pointer"
+                      />
+                    </button>
+                  ) : (
+                    <span className="text-gray-400 text-sm">Kein Foto</span>
+                  )}
+                </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(booking.status)}`}>
                     {booking.status}
@@ -211,6 +242,38 @@ export function AdminBookings() {
           </div>
         )}
       </div>
+
+      {/* Photo Modal */}
+      {showPhotoModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-2xl max-h-[90vh] overflow-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Inspiration Foto</h3>
+              <button
+                onClick={closePhotoModal}
+                className="text-gray-400 hover:text-gray-600 text-2xl"
+              >
+                ×
+              </button>
+            </div>
+            <div className="flex justify-center">
+              <img
+                src={selectedPhoto}
+                alt="Inspiration Foto"
+                className="max-w-full max-h-[70vh] object-contain rounded-lg"
+              />
+            </div>
+            <div className="mt-4 text-center">
+              <button
+                onClick={closePhotoModal}
+                className="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700"
+              >
+                Schließen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/client/components/booking-form.tsx

@@ -11,6 +11,8 @@ export function BookingForm() {
   const [selectedSlotId, setSelectedSlotId] = useState<string>("");
   const [notes, setNotes] = useState("");
   const [agbAccepted, setAgbAccepted] = useState(false);
+  const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
+  const [photoPreview, setPhotoPreview] = useState<string>("");
 
   const { data: treatments } = useQuery(
     queryClient.treatments.live.list.experimental_liveOptions()
@@ -33,6 +35,39 @@ export function BookingForm() {
   const selectedTreatmentData = treatments?.find((t) => t.id === selectedTreatment);
   const availableSlots = (slotsByDate || []).filter((s) => s.status === "free");
 
+  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Check file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      alert("Das Foto ist zu groß. Bitte wähle ein Bild unter 5MB.");
+      return;
+    }
+
+    // Check file type
+    if (!file.type.startsWith('image/')) {
+      alert("Bitte wähle nur Bilddateien aus.");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = event.target?.result as string;
+      setInspirationPhoto(result);
+      setPhotoPreview(result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const removePhoto = () => {
+    setInspirationPhoto("");
+    setPhotoPreview("");
+    // Reset file input
+    const fileInput = document.getElementById('photo-upload') as HTMLInputElement;
+    if (fileInput) fileInput.value = '';
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedTreatment || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedSlotId) {
@@ -54,6 +89,7 @@ export function BookingForm() {
         appointmentDate,
         appointmentTime,
         notes,
+        inspirationPhoto,
         slotId: selectedSlotId,
       },
       {
@@ -66,6 +102,11 @@ export function BookingForm() {
           setSelectedSlotId("");
           setNotes("");
           setAgbAccepted(false);
+          setInspirationPhoto("");
+          setPhotoPreview("");
+          // Reset file input
+          const fileInput = document.getElementById('photo-upload') as HTMLInputElement;
+          if (fileInput) fileInput.value = '';
           alert("Buchung erfolgreich erstellt! Wir werden dich kontaktieren, um deinen Termin zu bestätigen.");
         },
       }
@@ -202,6 +243,41 @@ export function BookingForm() {
           />
         </div>
 
+        {/* Inspiration Photo Upload */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Inspiration/Beispiel-Foto (optional)
+          </label>
+          <div className="space-y-3">
+            <input
+              id="photo-upload"
+              type="file"
+              accept="image/*"
+              onChange={handlePhotoUpload}
+              className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-pink-50 file:text-pink-700 hover:file:bg-pink-100"
+            />
+            {photoPreview && (
+              <div className="relative inline-block">
+                <img
+                  src={photoPreview}
+                  alt="Inspiration Preview"
+                  className="w-32 h-32 object-cover rounded-lg border border-gray-200"
+                />
+                <button
+                  type="button"
+                  onClick={removePhoto}
+                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-red-600"
+                >
+                  ×
+                </button>
+              </div>
+            )}
+            <p className="text-xs text-gray-500">
+              📸 Lade ein Foto hoch, das als Inspiration für deine Nagelbehandlung dienen soll. Max. 5MB, alle Bildformate erlaubt.
+            </p>
+          </div>
+        </div>
+
         {/* AGB Acceptance */}
         <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
           <div className="flex items-start space-x-3">

src/server/rpc/bookings.ts

@@ -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(),
 });