feat(frontend): add recording matching UI

Add frontend components for auto-matching recording partners:

- RecordingTab component with suggestions list and opt-out toggle
- Tab navigation in EventChatPage (Chat, Uczestnicy, Nagrywanie)
- Matching configuration in EventDetailsPage (deadline, run matching)
- matchingAPI functions in api.js
- Return registrationDeadline and matchingRunAt in GET /events/:slug/details

UI allows users to:
- View who will record their heats
- View heats they need to record
- Accept/reject suggestions
- Opt-out from being a recorder
- Set registration deadline (admin)
- Manually trigger matching (admin)

backend/src/routes/events.js

@@ -379,6 +379,8 @@ router.get('/:slug/details', authenticate, async (req, res, next) => {
           startDate: event.startDate,
           endDate: event.endDate,
           description: event.description,
+          registrationDeadline: event.registrationDeadline,
+          matchingRunAt: event.matchingRunAt,
         },
         checkin: {
           token: checkinToken.token,

frontend/src/components/events/ParticipantsSidebar.jsx

@@ -36,13 +36,14 @@ const ParticipantsSidebar = ({
   hideMyHeats = false,
   onHideMyHeatsChange,
   onMatchWith,
-  className = ''
+  className = '',
+  fullWidth = false
 }) => {
   const participantCount = users.length;
   const onlineCount = activeUsers.length;
 
   return (
-    <div className={`w-64 border-r bg-gray-50 p-4 overflow-y-auto ${className}`}>
+    <div className={`${fullWidth ? 'w-full' : 'w-64 border-r'} bg-gray-50 p-4 overflow-y-auto ${className}`}>
       {/* Header */}
       <div className="mb-4">
         <h3 className="font-semibold text-gray-900 mb-2">

frontend/src/components/recordings/RecordingTab.jsx

@@ -0,0 +1,374 @@
+import { useState, useEffect } from 'react';
+import { Video, VideoOff, Clock, CheckCircle, XCircle, AlertTriangle, RefreshCw } from 'lucide-react';
+import { matchingAPI } from '../../services/api';
+import Avatar from '../common/Avatar';
+
+/**
+ * RecordingTab - Main component for managing recording partnerships
+ * Shows suggestions for who will record user's heats and who user needs to record
+ */
+const RecordingTab = ({ slug, event, myHeats }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [suggestions, setSuggestions] = useState(null);
+  const [recorderOptOut, setRecorderOptOut] = useState(false);
+  const [updatingOptOut, setUpdatingOptOut] = useState(false);
+  const [runningMatching, setRunningMatching] = useState(false);
+
+  // Load suggestions on mount
+  useEffect(() => {
+    loadSuggestions();
+  }, [slug]);
+
+  const loadSuggestions = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await matchingAPI.getSuggestions(slug);
+      setSuggestions(data);
+    } catch (err) {
+      console.error('Failed to load suggestions:', err);
+      setError('Nie udalo sie zaladowac sugestii');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOptOutChange = async (newValue) => {
+    try {
+      setUpdatingOptOut(true);
+      await matchingAPI.setRecorderOptOut(slug, newValue);
+      setRecorderOptOut(newValue);
+    } catch (err) {
+      console.error('Failed to update opt-out:', err);
+    } finally {
+      setUpdatingOptOut(false);
+    }
+  };
+
+  const handleUpdateStatus = async (suggestionId, status) => {
+    try {
+      await matchingAPI.updateSuggestionStatus(slug, suggestionId, status);
+      // Reload suggestions
+      await loadSuggestions();
+    } catch (err) {
+      console.error('Failed to update suggestion status:', err);
+    }
+  };
+
+  const handleRunMatching = async () => {
+    try {
+      setRunningMatching(true);
+      await matchingAPI.runMatching(slug);
+      await loadSuggestions();
+    } catch (err) {
+      console.error('Failed to run matching:', err);
+    } finally {
+      setRunningMatching(false);
+    }
+  };
+
+  // Calculate countdown to matching
+  const getCountdown = () => {
+    if (!event?.registrationDeadline) return null;
+    const deadline = new Date(event.registrationDeadline);
+    const now = new Date();
+    const diff = deadline.getTime() - now.getTime();
+
+    if (diff <= 0) return null;
+
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+    return { hours, minutes };
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw className="w-8 h-8 animate-spin text-primary-600" />
+          <p className="text-gray-600">Ladowanie...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  const countdown = getCountdown();
+  const toBeRecorded = suggestions?.toBeRecorded || [];
+  const toRecord = suggestions?.toRecord || [];
+  const matchingRunAt = suggestions?.matchingRunAt;
+
+  return (
+    <div className="p-4 space-y-6 overflow-y-auto h-full">
+      {/* Header with info */}
+      <div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
+        <div className="flex items-center gap-3 mb-2">
+          <Video className="w-6 h-6 text-primary-600" />
+          <h3 className="text-lg font-semibold text-primary-900">Nagrywanie</h3>
+        </div>
+        <p className="text-sm text-primary-700">
+          System automatycznie dobiera osoby do wzajemnego nagrywania wystepow.
+        </p>
+      </div>
+
+      {/* Countdown or Status */}
+      {countdown ? (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+          <div className="flex items-center gap-3">
+            <Clock className="w-5 h-5 text-amber-600" />
+            <div>
+              <p className="font-medium text-amber-800">
+                Matching uruchomi sie za: {countdown.hours}h {countdown.minutes}min
+              </p>
+              <p className="text-sm text-amber-600">
+                Po zamknieciu zapisow system automatycznie dobierze partnerow do nagrywania.
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : matchingRunAt ? (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle className="w-5 h-5 text-green-600" />
+              <div>
+                <p className="font-medium text-green-800">Matching zakonczony</p>
+                <p className="text-sm text-green-600">
+                  Ostatnie uruchomienie: {new Date(matchingRunAt).toLocaleString('pl-PL')}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleRunMatching}
+              disabled={runningMatching}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
+            >
+              <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
+              {runningMatching ? 'Trwa...' : 'Uruchom ponownie'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <AlertTriangle className="w-5 h-5 text-gray-500" />
+              <p className="text-gray-600">Matching nie zostal jeszcze uruchomiony</p>
+            </div>
+            <button
+              onClick={handleRunMatching}
+              disabled={runningMatching}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50"
+            >
+              <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
+              {runningMatching ? 'Trwa...' : 'Uruchom matching'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* My heats to be recorded */}
+      <div>
+        <h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
+          <Video className="w-5 h-5 text-primary-600" />
+          Moje heaty do nagrania ({toBeRecorded.length})
+        </h4>
+
+        {toBeRecorded.length === 0 ? (
+          <div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+            {myHeats.length === 0
+              ? 'Nie masz zadeklarowanych heatow'
+              : 'Brak sugestii - uruchom matching'
+            }
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {toBeRecorded.map((suggestion) => (
+              <SuggestionCard
+                key={suggestion.id || suggestion.heat?.id}
+                suggestion={suggestion}
+                type="toBeRecorded"
+                onAccept={() => handleUpdateStatus(suggestion.id, 'accepted')}
+                onReject={() => handleUpdateStatus(suggestion.id, 'rejected')}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Heats I need to record */}
+      <div>
+        <h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
+          <VideoOff className="w-5 h-5 text-amber-600" />
+          Nagrywam innych ({toRecord.length})
+        </h4>
+
+        {toRecord.length === 0 ? (
+          <div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+            Nie masz przypisanych heatow do nagrywania
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {toRecord.map((suggestion) => (
+              <SuggestionCard
+                key={suggestion.id || suggestion.heat?.id}
+                suggestion={suggestion}
+                type="toRecord"
+                onAccept={() => handleUpdateStatus(suggestion.id, 'accepted')}
+                onReject={() => handleUpdateStatus(suggestion.id, 'rejected')}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Opt-out toggle */}
+      <div className="border-t pt-4">
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={recorderOptOut}
+            onChange={(e) => handleOptOutChange(e.target.checked)}
+            disabled={updatingOptOut}
+            className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+          />
+          <span className="text-sm text-gray-700">
+            Nie chce nagrywac innych (opt-out)
+          </span>
+          {updatingOptOut && (
+            <RefreshCw className="w-4 h-4 animate-spin text-gray-400" />
+          )}
+        </label>
+        <p className="text-xs text-gray-500 mt-1 ml-7">
+          Jesli zaznaczysz, spadniesz na koniec kolejki przy przydzielaniu partnerow.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * SuggestionCard - Single suggestion item
+ */
+const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
+  const heat = suggestion.heat;
+  const recorder = suggestion.recorder;
+  const dancer = heat?.user;
+  const status = suggestion.status;
+
+  // Format heat info
+  const heatInfo = heat
+    ? `${heat.division?.abbreviation || '?'} ${heat.competitionType?.abbreviation || '?'} H${heat.heatNumber}`
+    : 'Unknown heat';
+
+  const person = type === 'toBeRecorded' ? recorder : dancer;
+  const personLabel = type === 'toBeRecorded' ? 'Nagrywa Cie:' : 'Nagrywasz:';
+
+  // Status badge
+  const getStatusBadge = () => {
+    switch (status) {
+      case 'accepted':
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded">
+            <CheckCircle className="w-3 h-3" />
+            Zaakceptowano
+          </span>
+        );
+      case 'rejected':
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 rounded">
+            <XCircle className="w-3 h-3" />
+            Odrzucono
+          </span>
+        );
+      case 'not_found':
+        return (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
+            <AlertTriangle className="w-3 h-3" />
+            Nie znaleziono
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  // No recorder found
+  if (status === 'not_found') {
+    return (
+      <div className="flex items-center justify-between p-3 bg-amber-50 border border-amber-200 rounded-lg">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-5 h-5 text-amber-600" />
+          </div>
+          <div>
+            <p className="font-medium text-amber-900">{heatInfo}</p>
+            <p className="text-sm text-amber-700">Nie znaleziono dostepnego partnera</p>
+          </div>
+        </div>
+        {getStatusBadge()}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors">
+      <div className="flex items-center gap-3">
+        {person ? (
+          <Avatar
+            src={person.avatar}
+            username={person.username}
+            size={40}
+          />
+        ) : (
+          <div className="w-10 h-10 bg-gray-200 rounded-full" />
+        )}
+        <div>
+          <p className="font-medium text-gray-900">{heatInfo}</p>
+          <p className="text-sm text-gray-600">
+            {personLabel} <span className="font-medium">@{person?.username || '?'}</span>
+            {person?.city && (
+              <span className="text-gray-400"> ({person.city})</span>
+            )}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {status === 'pending' ? (
+          <>
+            <button
+              onClick={onAccept}
+              className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors"
+              title="Akceptuj"
+            >
+              <CheckCircle className="w-5 h-5" />
+            </button>
+            <button
+              onClick={onReject}
+              className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors"
+              title="Odrzuc"
+            >
+              <XCircle className="w-5 h-5" />
+            </button>
+          </>
+        ) : (
+          getStatusBadge()
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RecordingTab;

frontend/src/pages/EventChatPage.jsx

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { useAuth } from '../contexts/AuthContext';
-import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X } from 'lucide-react';
+import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X, MessageSquare, Users, Video } from 'lucide-react';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
 import HeatsBanner from '../components/heats/HeatsBanner';
@@ -14,6 +14,7 @@ import ConfirmationModal from '../components/modals/ConfirmationModal';
 import Modal from '../components/modals/Modal';
 import useEventChat from '../hooks/useEventChat';
 import ParticipantsSidebar from '../components/events/ParticipantsSidebar';
+import RecordingTab from '../components/recordings/RecordingTab';
 
 const EventChatPage = () => {
   const { slug } = useParams();
@@ -50,6 +51,9 @@ const EventChatPage = () => {
   const [hideMyHeats, setHideMyHeats] = useState(false);
   const [showHeatsModal, setShowHeatsModal] = useState(false);
 
+  // Tab state: 'chat' | 'participants' | 'recording'
+  const [activeTab, setActiveTab] = useState('chat');
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -397,40 +401,116 @@ const EventChatPage = () => {
             />
           )}
 
-          <div className="flex h-[calc(100vh-280px)]">
+          {/* Tab Navigation */}
-            <ParticipantsSidebar
+          <div className="border-b bg-gray-50">
-              users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
+            <nav className="flex">
-              activeUsers={activeUsers}
+              <button
-              userHeats={userHeats}
+                onClick={() => setActiveTab('chat')}
-              userCompetitorNumbers={userCompetitorNumbers}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-              myHeats={myHeats}
+                  activeTab === 'chat'
-              hideMyHeats={hideMyHeats}
+                    ? 'border-primary-600 text-primary-600 bg-white'
-              onHideMyHeatsChange={setHideMyHeats}
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              onMatchWith={handleMatchWith}
+                }`}
-            />
+              >
+                <MessageSquare className="w-4 h-4" />
+                Chat
+              </button>
+              <button
+                onClick={() => setActiveTab('participants')}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'participants'
+                    ? 'border-primary-600 text-primary-600 bg-white'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <Users className="w-4 h-4" />
+                Uczestnicy
+                <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
+                  {checkedInUsers.length}
+                </span>
+              </button>
+              <button
+                onClick={() => setActiveTab('recording')}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'recording'
+                    ? 'border-primary-600 text-primary-600 bg-white'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <Video className="w-4 h-4" />
+                Nagrywanie
+              </button>
+            </nav>
+          </div>
 
-            {/* Chat Area */}
+          <div className="h-[calc(100vh-340px)]">
-            <div className="flex-1 flex flex-col">
+            {/* Chat Tab */}
-              <ChatMessageList
+            {activeTab === 'chat' && (
-                messages={messages}
+              <div className="flex h-full">
-                currentUserId={user.id}
+                {/* Sidebar - visible only on chat tab on larger screens */}
-                messagesEndRef={messagesEndRef}
+                <div className="hidden lg:block">
-                messagesContainerRef={messagesContainerRef}
+                  <ParticipantsSidebar
-                loadingOlder={loadingOlder}
+                    users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
-                hasMore={hasMore}
+                    activeUsers={activeUsers}
-              />
+                    userHeats={userHeats}
+                    userCompetitorNumbers={userCompetitorNumbers}
+                    myHeats={myHeats}
+                    hideMyHeats={hideMyHeats}
+                    onHideMyHeatsChange={setHideMyHeats}
+                    onMatchWith={handleMatchWith}
+                  />
+                </div>
 
-              {/* Message Input */}
+                {/* Chat Area */}
-              <div className="border-t p-4">
+                <div className="flex-1 flex flex-col">
-                <ChatInput
+                  <ChatMessageList
-                  value={newMessage}
+                    messages={messages}
-                  onChange={(e) => setNewMessage(e.target.value)}
+                    currentUserId={user.id}
-                  onSubmit={handleSendMessage}
+                    messagesEndRef={messagesEndRef}
-                  disabled={!isConnected}
+                    messagesContainerRef={messagesContainerRef}
-                  placeholder="Write a message..."
+                    loadingOlder={loadingOlder}
+                    hasMore={hasMore}
+                  />
+
+                  {/* Message Input */}
+                  <div className="border-t p-4">
+                    <ChatInput
+                      value={newMessage}
+                      onChange={(e) => setNewMessage(e.target.value)}
+                      onSubmit={handleSendMessage}
+                      disabled={!isConnected}
+                      placeholder="Write a message..."
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Participants Tab */}
+            {activeTab === 'participants' && (
+              <div className="h-full overflow-y-auto p-4">
+                <ParticipantsSidebar
+                  users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
+                  activeUsers={activeUsers}
+                  userHeats={userHeats}
+                  userCompetitorNumbers={userCompetitorNumbers}
+                  myHeats={myHeats}
+                  hideMyHeats={hideMyHeats}
+                  onHideMyHeatsChange={setHideMyHeats}
+                  onMatchWith={handleMatchWith}
+                  fullWidth={true}
                 />
               </div>
-            </div>
+            )}
+
+            {/* Recording Tab */}
+            {activeTab === 'recording' && (
+              <RecordingTab
+                slug={slug}
+                event={event}
+                myHeats={myHeats}
+              />
+            )}
           </div>
 
           {/* Leave Event Button */}

frontend/src/pages/EventDetailsPage.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { QRCodeSVG } from 'qrcode.react';
-import { Copy, Check, Users, Calendar, MapPin, QrCode } from 'lucide-react';
+import { Copy, Check, Users, Calendar, MapPin, QrCode, Video, Clock, Save, RefreshCw } from 'lucide-react';
 import Layout from '../components/layout/Layout';
-import { eventsAPI } from '../services/api';
+import { eventsAPI, matchingAPI } from '../services/api';
 
 export default function EventDetailsPage() {
   const { slug } = useParams();
@@ -12,6 +12,11 @@ export default function EventDetailsPage() {
   const [error, setError] = useState('');
   const [copied, setCopied] = useState(false);
 
+  // Registration deadline state
+  const [deadlineInput, setDeadlineInput] = useState('');
+  const [savingDeadline, setSavingDeadline] = useState(false);
+  const [runningMatching, setRunningMatching] = useState(false);
+
   useEffect(() => {
     fetchEventDetails();
   }, [slug]);
@@ -21,6 +26,11 @@ export default function EventDetailsPage() {
       setLoading(true);
       const response = await eventsAPI.getDetails(slug);
       setEventDetails(response.data);
+      // Initialize deadline input
+      if (response.data?.event?.registrationDeadline) {
+        const deadline = new Date(response.data.event.registrationDeadline);
+        setDeadlineInput(deadline.toISOString().slice(0, 16)); // Format for datetime-local
+      }
     } catch (err) {
       console.error('Error loading event details:', err);
       setError(err.message || 'Failed to load event details');
@@ -29,6 +39,34 @@ export default function EventDetailsPage() {
     }
   };
 
+  const handleSaveDeadline = async () => {
+    try {
+      setSavingDeadline(true);
+      const deadline = deadlineInput ? new Date(deadlineInput).toISOString() : null;
+      await matchingAPI.setRegistrationDeadline(slug, deadline);
+      await fetchEventDetails(); // Refresh data
+    } catch (err) {
+      console.error('Failed to save deadline:', err);
+      alert('Nie udalo sie zapisac deadline');
+    } finally {
+      setSavingDeadline(false);
+    }
+  };
+
+  const handleRunMatching = async () => {
+    try {
+      setRunningMatching(true);
+      const result = await matchingAPI.runMatching(slug);
+      alert(`Matching zakonczony! Dopasowano: ${result.matched}, Nie znaleziono: ${result.notFound}`);
+      await fetchEventDetails(); // Refresh data
+    } catch (err) {
+      console.error('Failed to run matching:', err);
+      alert('Nie udalo sie uruchomic matchingu');
+    } finally {
+      setRunningMatching(false);
+    }
+  };
+
   const copyToClipboard = async () => {
     try {
       await navigator.clipboard.writeText(eventDetails.checkin.url);
@@ -210,6 +248,89 @@ export default function EventDetailsPage() {
           </div>
         </div>
 
+        {/* Auto-Matching Configuration */}
+        <div className="mt-6 bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+            <Video className="text-primary-600" />
+            Auto-Matching (Nagrywanie)
+          </h2>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Registration Deadline */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                <Clock size={16} className="inline mr-1" />
+                Deadline rejestracji
+              </label>
+              <p className="text-xs text-gray-500 mb-2">
+                Matching uruchomi sie 30 min po tym terminie
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="datetime-local"
+                  value={deadlineInput}
+                  onChange={(e) => setDeadlineInput(e.target.value)}
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
+                />
+                <button
+                  onClick={handleSaveDeadline}
+                  disabled={savingDeadline}
+                  className="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50 flex items-center gap-2"
+                >
+                  {savingDeadline ? (
+                    <RefreshCw size={16} className="animate-spin" />
+                  ) : (
+                    <Save size={16} />
+                  )}
+                  Zapisz
+                </button>
+              </div>
+              {event.registrationDeadline && (
+                <p className="text-sm text-green-600 mt-2">
+                  Aktualny deadline: {new Date(event.registrationDeadline).toLocaleString('pl-PL')}
+                </p>
+              )}
+            </div>
+
+            {/* Matching Status & Run */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Status matchingu
+              </label>
+              {event.matchingRunAt ? (
+                <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-3">
+                  <p className="text-green-800 text-sm">
+                    Ostatnie uruchomienie: {new Date(event.matchingRunAt).toLocaleString('pl-PL')}
+                  </p>
+                </div>
+              ) : (
+                <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-3">
+                  <p className="text-amber-800 text-sm">
+                    Matching nie byl jeszcze uruchomiony
+                  </p>
+                </div>
+              )}
+              <button
+                onClick={handleRunMatching}
+                disabled={runningMatching}
+                className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {runningMatching ? (
+                  <>
+                    <RefreshCw size={16} className="animate-spin" />
+                    Trwa matching...
+                  </>
+                ) : (
+                  <>
+                    <Video size={16} />
+                    Uruchom Matching
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
         {/* Action Buttons */}
         <div className="mt-6 flex gap-4">
           <Link

frontend/src/services/api.js

@@ -388,4 +388,48 @@ export const dashboardAPI = {
   },
 };
 
+// Recording Matching API (Auto-matching for recording partners)
+export const matchingAPI = {
+  // Get match suggestions for current user
+  async getSuggestions(slug) {
+    const data = await fetchAPI(`/events/${slug}/match-suggestions`);
+    return data.data;
+  },
+
+  // Run matching algorithm (admin/trigger)
+  async runMatching(slug) {
+    const data = await fetchAPI(`/events/${slug}/run-matching`, {
+      method: 'POST',
+    });
+    return data.data;
+  },
+
+  // Accept or reject a suggestion
+  async updateSuggestionStatus(slug, suggestionId, status) {
+    const data = await fetchAPI(`/events/${slug}/match-suggestions/${suggestionId}/status`, {
+      method: 'PUT',
+      body: JSON.stringify({ status }),
+    });
+    return data.data;
+  },
+
+  // Set recorder opt-out preference
+  async setRecorderOptOut(slug, optOut) {
+    const data = await fetchAPI(`/events/${slug}/recorder-opt-out`, {
+      method: 'PUT',
+      body: JSON.stringify({ optOut }),
+    });
+    return data.data;
+  },
+
+  // Set registration deadline (admin)
+  async setRegistrationDeadline(slug, deadline) {
+    const data = await fetchAPI(`/events/${slug}/registration-deadline`, {
+      method: 'PUT',
+      body: JSON.stringify({ registrationDeadline: deadline }),
+    });
+    return data.data;
+  },
+};
+
 export { ApiError };