feat(frontend): add Run now button and matching runs list on event details page

- New adminAPI for run-now and runs listing
- MatchingRunsSection with refresh and run controls
- Integrate into EventDetailsPage under matching configuration

backend/prisma/migrations/20251130120000_add_matching_runs_audit/migration.sql

@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "matching_runs" (
+    "id" SERIAL NOT NULL,
+    "event_id" INTEGER NOT NULL,
+    "trigger" VARCHAR(20) NOT NULL,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'running',
+    "started_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "ended_at" TIMESTAMP(3),
+    "matched_count" INTEGER NOT NULL DEFAULT 0,
+    "not_found_count" INTEGER NOT NULL DEFAULT 0,
+    "error" TEXT,
+
+    CONSTRAINT "matching_runs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "matching_runs_event_id_started_at_idx" ON "matching_runs"("event_id", "started_at");
+
+-- AddForeignKey
+ALTER TABLE "matching_runs" ADD CONSTRAINT "matching_runs_event_id_fkey" FOREIGN KEY ("event_id") REFERENCES "events"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+

frontend/src/components/events/MatchingRunsSection.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { adminAPI } from '../../services/api';
+import { RefreshCcw, Play } from 'lucide-react';
+
+export default function MatchingRunsSection({ slug }) {
+  const [runs, setRuns] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [running, setRunning] = useState(false);
+
+  const loadRuns = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const res = await adminAPI.getMatchingRuns(slug, 20);
+      setRuns(res.data || []);
+    } catch (err) {
+      console.error('Failed to load matching runs', err);
+      setError(err.message || 'Failed to load matching runs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadRuns();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  const handleRunNow = async () => {
+    try {
+      setRunning(true);
+      setError('');
+      await adminAPI.runMatchingNow(slug);
+      await loadRuns();
+    } catch (err) {
+      console.error('Failed to run matching now', err);
+      setError(err.message || 'Failed to run matching');
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const formatDateTime = (dt) => dt ? new Date(dt).toLocaleString() : '-';
+
+  return (
+    <section className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-lg font-semibold text-gray-900">Matching Runs</h2>
+        <div className="flex gap-2">
+          <button
+            onClick={loadRuns}
+            disabled={loading}
+            className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+          >
+            <RefreshCcw size={16} className="mr-2" /> Refresh
+          </button>
+          <button
+            onClick={handleRunNow}
+            disabled={running}
+            className="inline-flex items-center px-3 py-2 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
+          >
+            <Play size={16} className="mr-2" /> Run now
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded p-2">{error}</div>
+      )}
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
+              <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ended</th>
+              <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trigger</th>
+              <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+              <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Matched</th>
+              <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Not found</th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {loading ? (
+              <tr>
+                <td colSpan="6" className="px-3 py-3 text-center text-gray-500">Loading...</td>
+              </tr>
+            ) : runs.length === 0 ? (
+              <tr>
+                <td colSpan="6" className="px-3 py-3 text-center text-gray-500">No runs yet</td>
+              </tr>
+            ) : (
+              runs.map((run) => (
+                <tr key={run.id}>
+                  <td className="px-3 py-2 text-sm text-gray-900">{formatDateTime(run.startedAt)}</td>
+                  <td className="px-3 py-2 text-sm text-gray-700">{formatDateTime(run.endedAt)}</td>
+                  <td className="px-3 py-2 text-sm text-gray-700 capitalize">{run.trigger}</td>
+                  <td className="px-3 py-2 text-sm">
+                    <span className={`px-2 py-1 rounded text-xs font-medium 
+                      ${run.status === 'success' ? 'bg-green-50 text-green-700' : ''}
+                      ${run.status === 'error' ? 'bg-red-50 text-red-700' : ''}
+                      ${run.status === 'running' ? 'bg-blue-50 text-blue-700' : ''}
+                    `}>
+                      {run.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-sm text-right text-gray-700">{run.matchedCount}</td>
+                  <td className="px-3 py-2 text-sm text-right text-gray-700">{run.notFoundCount}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {runs.some(r => r.error) && (
+        <div className="mt-3 text-xs text-red-700">
+          Last error: {runs.find(r => r.error)?.error}
+        </div>
+      )}
+    </section>
+  );
+}
+

frontend/src/pages/EventDetailsPage.jsx

@@ -7,6 +7,7 @@ import QRCodeSection from '../components/events/QRCodeSection';
 import ParticipantsSection from '../components/events/ParticipantsSection';
 import MatchingConfigSection from '../components/events/MatchingConfigSection';
 import ScheduleConfigSection from '../components/events/ScheduleConfigSection';
+import MatchingRunsSection from '../components/events/MatchingRunsSection';
 
 export default function EventDetailsPage() {
   const { slug } = useParams();
@@ -105,6 +106,11 @@ export default function EventDetailsPage() {
           <MatchingConfigSection slug={slug} event={event} onRefresh={fetchEventDetails} />
         </div>
 
+        {/* Matching Runs (admin tools) */}
+        <div className="mt-6">
+          <MatchingRunsSection slug={slug} />
+        </div>
+
         {/* Schedule Configuration */}
         <div className="mt-6">
           <ScheduleConfigSection slug={slug} event={event} onRefresh={fetchEventDetails} />

frontend/src/services/api.js

@@ -441,4 +441,20 @@ export const matchingAPI = {
   },
 };
 
+// Admin API (matching control)
+export const adminAPI = {
+  async runMatchingNow(slug) {
+    const data = await fetchAPI(`/admin/events/${slug}/run-now`, {
+      method: 'POST',
+    });
+    return data.data;
+  },
+
+  async getMatchingRuns(slug, limit = 20) {
+    const params = new URLSearchParams({ limit: String(limit) });
+    const data = await fetchAPI(`/admin/events/${slug}/matching-runs?${params.toString()}`);
+    return data;
+  },
+};
+
 export { ApiError };