feat(bookings): add provider-aware UI components for booking management

Implemented complete UI foundation for booking drawer with provider gating:

**Components Created:**

1. **ProviderBanner** (src/components/bookings/ProviderBanner.tsx)
   - Displays informational banner for FairPlay clubs
   - "This club is managed by {provider}" messaging
   - Only shows for non-local providers
   - Blue theme with Info icon

2. **CapacityDisplay** (src/components/bookings/CapacityDisplay.tsx)
   - Shows "X / Y booked · Z remaining" format
   - Three variants: default, compact, inline
   - Color-coded availability (red=full, orange=low, gray=available)
   - Responsive text sizing

3. **NotifyPlayersToggle** (src/components/bookings/NotifyPlayersToggle.tsx)
   - Toggle for controlling player notifications
   - Defaults to ON (true)
   - Persists preference to localStorage (key: booking_admin_notify_players)
   - SSR-safe with hydration protection
   - Bell/BellOff icon feedback
   - Exports getStoredNotifyPreference() helper

4. **BookingDrawer** (src/components/bookings/BookingDrawer.tsx)
   - Main booking management UI (360+ lines)
   - Provider-aware: disables actions for FairPlay clubs
   - Displays: time, location, capacity, attendees, booked_by
   - Status badges (confirmed/cancelled/no_show)
   - Attendee type badges (app_user/guest/remote_member)
   - Action buttons: Move, Edit Attendees, Cancel (hidden for FairPlay)
   - ETag support for optimistic concurrency
   - Loading and error states
   - Integrates all sub-components

**Features:**
- Read-only mode for FairPlay bookings (provider.manages_slot_storage === false)
- Capacity display with color-coded availability
- Notification toggle with localStorage persistence
- Professional slate theme matching existing UI
- Fully typed with BookingDetail interface
- Error handling with user-friendly messages

**TODO Placeholders:**
- Move booking flow (button wired, implementation pending)
- Edit attendees flow (button wired, implementation pending)
- Cancel booking flow (button wired, implementation pending)

Related: Phase 3, Booking Admin API v1.1, BUILD #22

src/components/bookings/BookingDrawer.tsx

@@ -0,0 +1,311 @@
+/**
+ * Booking Drawer Component
+ *
+ * Main UI for viewing and managing bookings.
+ * Supports cancel, move, and attendee operations with provider gating.
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X, Loader2, Calendar, Users, MapPin, AlertCircle } from 'lucide-react';
+import type { BookingDetail } from '@/src/types/bookings';
+import { getBooking } from '@/src/lib/api/bookings';
+import { getBookingErrorMessage } from '@/src/types/bookings';
+import ProviderBanner from './ProviderBanner';
+import CapacityDisplay from './CapacityDisplay';
+import NotifyPlayersToggle, { getStoredNotifyPreference } from './NotifyPlayersToggle';
+
+interface BookingDrawerProps {
+  bookingId: number;
+  onClose: () => void;
+  onUpdate?: () => void;
+}
+
+export default function BookingDrawer({ bookingId, onClose, onUpdate }: BookingDrawerProps) {
+  const [booking, setBooking] = useState<BookingDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notifyPlayers, setNotifyPlayers] = useState(true);
+
+  // Check if provider manages storage (read-only mode)
+  const isReadOnly = booking?.provider?.manages_slot_storage === false;
+
+  useEffect(() => {
+    loadBooking();
+    // Initialize notify preference from localStorage
+    setNotifyPlayers(getStoredNotifyPreference());
+  }, [bookingId]);
+
+  async function loadBooking() {
+    setLoading(true);
+    setError(null);
+
+    const result = await getBooking(bookingId);
+
+    if (result.success) {
+      setBooking(result.data);
+    } else {
+      setError(getBookingErrorMessage(result.error));
+    }
+
+    setLoading(false);
+  }
+
+  function formatDateTime(isoString: string): string {
+    const date = new Date(isoString);
+    return date.toLocaleString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  }
+
+  function formatTime(isoString: string): string {
+    const date = new Date(isoString);
+    return date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  }
+
+  function getStatusBadge(status: BookingDetail['status']) {
+    const badges = {
+      confirmed: 'bg-green-100 text-green-800 border-green-200',
+      cancelled: 'bg-red-100 text-red-800 border-red-200',
+      no_show: 'bg-orange-100 text-orange-800 border-orange-200',
+    };
+
+    const labels = {
+      confirmed: 'Confirmed',
+      cancelled: 'Cancelled',
+      no_show: 'No Show',
+    };
+
+    return (
+      <span
+        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border-2 ${badges[status]}`}
+      >
+        {labels[status]}
+      </span>
+    );
+  }
+
+  function getAttendeeTypeBadge(type: string) {
+    const badges = {
+      app_user: 'bg-blue-100 text-blue-800',
+      guest: 'bg-purple-100 text-purple-800',
+      remote_member: 'bg-slate-100 text-slate-800',
+    };
+
+    return badges[type as keyof typeof badges] || badges.app_user;
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+        <div className="bg-white rounded-2xl p-8 max-w-2xl w-full mx-4">
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error || !booking) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+        <div className="bg-white rounded-2xl p-8 max-w-2xl w-full mx-4">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold text-slate-900">Error Loading Booking</h2>
+            <button
+              onClick={onClose}
+              className="text-slate-400 hover:text-slate-600 transition-colors"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+
+          <div className="bg-red-50 border-2 border-red-200 rounded-lg p-4">
+            <div className="flex items-start space-x-3">
+              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <p className="text-red-700">{error || 'Failed to load booking'}</p>
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-slate-200 text-slate-700 font-semibold rounded-lg hover:bg-slate-300 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+      <div className="bg-white rounded-2xl p-8 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <h2 className="text-2xl font-bold text-slate-900">Booking Details</h2>
+            {getStatusBadge(booking.status)}
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Provider Banner (if applicable) */}
+        {booking.provider && <ProviderBanner provider={booking.provider} className="mb-6" />}
+
+        {/* Booking Info */}
+        <div className="space-y-6">
+          {/* Time & Location */}
+          <section className="bg-slate-50 border-2 border-slate-200 rounded-lg p-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex items-start space-x-3">
+                <Calendar className="w-5 h-5 text-slate-600 mt-0.5" />
+                <div>
+                  <p className="text-xs font-semibold text-slate-600 uppercase">Time</p>
+                  <p className="text-sm font-medium text-slate-900 mt-1">
+                    {formatDateTime(booking.slot.starts_at)}
+                  </p>
+                  <p className="text-xs text-slate-600 mt-0.5">
+                    {formatTime(booking.slot.starts_at)} - {formatTime(booking.slot.ends_at)}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start space-x-3">
+                <MapPin className="w-5 h-5 text-slate-600 mt-0.5" />
+                <div>
+                  <p className="text-xs font-semibold text-slate-600 uppercase">Location</p>
+                  <p className="text-sm font-medium text-slate-900 mt-1">
+                    {booking.slot.court.name}
+                  </p>
+                  <p className="text-xs text-slate-600 mt-0.5">{booking.slot.court.club_name}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Capacity */}
+            <div className="mt-4 pt-4 border-t border-slate-300">
+              <CapacityDisplay slot={booking.slot} variant="inline" />
+            </div>
+          </section>
+
+          {/* Attendees */}
+          <section>
+            <div className="flex items-center space-x-2 mb-3">
+              <Users className="w-5 h-5 text-slate-600" />
+              <h3 className="text-lg font-semibold text-slate-900">
+                Attendees ({booking.attendees.length})
+              </h3>
+            </div>
+
+            <div className="space-y-2">
+              {booking.attendees.map((attendee) => (
+                <div
+                  key={attendee.position}
+                  className="flex items-center justify-between bg-slate-50 border border-slate-200 rounded-lg p-3"
+                >
+                  <div className="flex items-center space-x-3">
+                    <span className="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-sm font-semibold text-slate-700">
+                      {attendee.position}
+                    </span>
+                    <div>
+                      <p className="text-sm font-medium text-slate-900">
+                        {attendee.display_name}
+                      </p>
+                      {attendee.email && (
+                        <p className="text-xs text-slate-600">{attendee.email}</p>
+                      )}
+                    </div>
+                  </div>
+                  <span
+                    className={`px-2 py-1 rounded text-xs font-medium ${getAttendeeTypeBadge(
+                      attendee.type
+                    )}`}
+                  >
+                    {attendee.type.replace('_', ' ')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Booked By */}
+          <section className="bg-slate-50 border-2 border-slate-200 rounded-lg p-4">
+            <p className="text-xs font-semibold text-slate-600 uppercase mb-2">Booked By</p>
+            <div>
+              <p className="text-sm font-medium text-slate-900">{booking.booked_by.display_name}</p>
+              <p className="text-xs text-slate-600 mt-0.5">{booking.booked_by.email}</p>
+            </div>
+          </section>
+
+          {/* Actions */}
+          {!isReadOnly && booking.status === 'confirmed' && (
+            <section className="space-y-4">
+              {/* Notify Toggle */}
+              <NotifyPlayersToggle value={notifyPlayers} onChange={setNotifyPlayers} />
+
+              {/* Action Buttons */}
+              <div className="grid grid-cols-3 gap-3">
+                <button
+                  className="px-4 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+                  onClick={() => {
+                    // TODO: Implement move flow
+                    console.log('Move booking', { notifyPlayers });
+                  }}
+                >
+                  Move
+                </button>
+                <button
+                  className="px-4 py-3 bg-slate-200 text-slate-700 font-semibold rounded-lg hover:bg-slate-300 transition-colors"
+                  onClick={() => {
+                    // TODO: Implement edit attendees flow
+                    console.log('Edit attendees', { notifyPlayers });
+                  }}
+                >
+                  Edit Attendees
+                </button>
+                <button
+                  className="px-4 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-colors"
+                  onClick={() => {
+                    // TODO: Implement cancel flow
+                    console.log('Cancel booking', { notifyPlayers });
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </section>
+          )}
+        </div>
+
+        {/* Close Button */}
+        <div className="mt-6 pt-6 border-t border-slate-200">
+          <button
+            onClick={onClose}
+            className="w-full px-4 py-3 bg-slate-200 text-slate-700 font-semibold rounded-lg hover:bg-slate-300 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/bookings/CapacityDisplay.tsx

@@ -0,0 +1,60 @@
+/**
+ * Capacity Display Component
+ *
+ * Shows booking capacity in "booked_count / capacity · remaining" format.
+ * Provides visual feedback for slot availability.
+ */
+
+import type { BookingSlot } from '@/src/types/bookings';
+
+interface CapacityDisplayProps {
+  slot: Pick<BookingSlot, 'booked_count' | 'capacity' | 'capacity_remaining'>;
+  variant?: 'default' | 'compact' | 'inline';
+  className?: string;
+}
+
+export default function CapacityDisplay({
+  slot,
+  variant = 'default',
+  className = '',
+}: CapacityDisplayProps) {
+  const { booked_count, capacity, capacity_remaining } = slot;
+
+  // Determine color based on availability
+  const availabilityColor =
+    capacity_remaining === 0
+      ? 'text-red-600'
+      : capacity_remaining <= 1
+      ? 'text-orange-600'
+      : 'text-slate-700';
+
+  if (variant === 'compact') {
+    return (
+      <span className={`text-sm font-medium ${availabilityColor} ${className}`}>
+        {booked_count} / {capacity}
+      </span>
+    );
+  }
+
+  if (variant === 'inline') {
+    return (
+      <span className={`text-sm ${availabilityColor} ${className}`}>
+        {booked_count} / {capacity} booked · {capacity_remaining} remaining
+      </span>
+    );
+  }
+
+  return (
+    <div className={`${className}`}>
+      <div className="flex items-baseline space-x-2">
+        <span className={`text-lg font-semibold ${availabilityColor}`}>
+          {booked_count} / {capacity}
+        </span>
+        <span className="text-sm text-slate-600">booked</span>
+      </div>
+      <p className="text-xs text-slate-500 mt-0.5">
+        {capacity_remaining} {capacity_remaining === 1 ? 'spot' : 'spots'} remaining
+      </p>
+    </div>
+  );
+}

src/components/bookings/NotifyPlayersToggle.tsx

@@ -0,0 +1,110 @@
+/**
+ * Notify Players Toggle Component
+ *
+ * Toggle for controlling whether to send notifications to players.
+ * Defaults to ON and persists preference to localStorage.
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Bell, BellOff } from 'lucide-react';
+
+interface NotifyPlayersToggleProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const STORAGE_KEY = 'booking_admin_notify_players';
+
+/**
+ * Get stored notify preference from localStorage
+ */
+export function getStoredNotifyPreference(): boolean {
+  if (typeof window === 'undefined') return true;
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === null ? true : stored === 'true';
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Store notify preference to localStorage
+ */
+export function setStoredNotifyPreference(value: boolean): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    localStorage.setItem(STORAGE_KEY, String(value));
+  } catch {
+    // Ignore localStorage errors
+  }
+}
+
+export default function NotifyPlayersToggle({
+  value,
+  onChange,
+  disabled = false,
+  className = '',
+}: NotifyPlayersToggleProps) {
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  function handleToggle() {
+    const newValue = !value;
+    onChange(newValue);
+    setStoredNotifyPreference(newValue);
+  }
+
+  if (!mounted) {
+    // Render placeholder during SSR
+    return (
+      <div className={`flex items-center space-x-3 ${className}`}>
+        <div className="w-11 h-6 bg-slate-200 rounded-full" />
+        <span className="text-sm text-slate-600">Notify players</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center space-x-3 ${className}`}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        disabled={disabled}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2 ${
+          value ? 'bg-slate-900' : 'bg-slate-300'
+        } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+        role="switch"
+        aria-checked={value}
+        aria-label="Toggle player notifications"
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            value ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+
+      <div className="flex items-center space-x-2">
+        {value ? (
+          <Bell className="w-4 h-4 text-slate-700" />
+        ) : (
+          <BellOff className="w-4 h-4 text-slate-400" />
+        )}
+        <span className={`text-sm font-medium ${value ? 'text-slate-900' : 'text-slate-500'}`}>
+          {value ? 'Notify players' : 'Silent mode'}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/bookings/ProviderBanner.tsx

@@ -0,0 +1,42 @@
+/**
+ * Provider Banner Component
+ *
+ * Displays informational banner for bookings managed by external providers.
+ * Used to communicate read-only state for FairPlay clubs.
+ */
+
+import { Info } from 'lucide-react';
+import type { ProviderInfo } from '@/src/types/bookings';
+
+interface ProviderBannerProps {
+  provider: ProviderInfo;
+  className?: string;
+}
+
+export default function ProviderBanner({ provider, className = '' }: ProviderBannerProps) {
+  // Only show banner for non-local providers
+  if (provider.type === 'local') {
+    return null;
+  }
+
+  const providerName = provider.type === 'fairplay' ? 'FairPlay' : 'an external provider';
+
+  return (
+    <div
+      className={`bg-blue-50 border-2 border-blue-200 rounded-lg p-4 ${className}`}
+      role="alert"
+    >
+      <div className="flex items-start space-x-3">
+        <Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+        <div className="flex-1">
+          <h4 className="text-sm font-semibold text-blue-900 mb-1">
+            This club is managed by {providerName}
+          </h4>
+          <p className="text-sm text-blue-700">
+            Admin edits are disabled here. Changes must be made in the provider's system.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}