refactor(frontend): replace status string literals with constants

- Create constants/statuses.js with MATCH_STATUS, SUGGESTION_STATUS, MATCH_FILTER
- Update MatchCard, MatchesPage, HistoryPage, RatePartnerPage to use MATCH_STATUS
- Update RecordingTab to use SUGGESTION_STATUS
- Update Navbar to use MATCH_STATUS for API calls

frontend/src/pages/HistoryPage.jsx

@@ -1,6 +1,7 @@
 import Layout from '../components/layout/Layout';
 import { mockMatches, mockRatings } from '../mocks/matches';
 import { Calendar, MapPin, Star, MessageCircle } from 'lucide-react';
+import { MATCH_STATUS } from '../constants';
 
 const HistoryPage = () => {
   return (
@@ -42,12 +43,12 @@ const HistoryPage = () => {
                   <div>
                     <span
                       className={`px-3 py-1 rounded-full text-sm font-medium ${
-                        match.status === 'completed'
+                        match.status === MATCH_STATUS.COMPLETED
                           ? 'bg-green-100 text-green-800'
                           : 'bg-blue-100 text-blue-800'
                       }`}
                     >
-                      {match.status === 'completed' ? 'Completed' : 'Active'}
+                      {match.status === MATCH_STATUS.COMPLETED ? 'Completed' : 'Active'}
                     </span>
                   </div>
                 </div>

frontend/src/pages/MatchesPage.jsx

@@ -6,13 +6,14 @@ import { matchesAPI } from '../services/api';
 import { Loader2, Users } from 'lucide-react';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { MatchCard } from '../components/matches';
+import { MATCH_STATUS, MATCH_FILTER } from '../constants';
 
 const MatchesPage = () => {
   const { user } = useAuth();
   const navigate = useNavigate();
   const [matches, setMatches] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('all'); // 'all', 'pending', 'accepted'
+  const [filter, setFilter] = useState(MATCH_FILTER.ALL);
   const [processingMatchId, setProcessingMatchId] = useState(null);
 
   useEffect(() => {
@@ -108,20 +109,20 @@ const MatchesPage = () => {
   };
 
   const handleOpenChat = (match) => {
-    if (match.status === 'accepted' && match.roomId) {
+    if (match.status === MATCH_STATUS.ACCEPTED && match.roomId) {
       navigate(`/matches/${match.slug}/chat`);
     }
   };
 
   // Filter matches based on selected filter
   const filteredMatches = matches.filter(match => {
-    if (filter === 'all') return true;
+    if (filter === MATCH_FILTER.ALL) return true;
     return match.status === filter;
   });
 
   // Separate pending incoming matches (where user is recipient)
-  const pendingIncoming = filteredMatches.filter(m => m.status === 'pending' && !m.isInitiator);
-  const otherMatches = filteredMatches.filter(m => !(m.status === 'pending' && !m.isInitiator));
+  const pendingIncoming = filteredMatches.filter(m => m.status === MATCH_STATUS.PENDING && !m.isInitiator);
+  const otherMatches = filteredMatches.filter(m => !(m.status === MATCH_STATUS.PENDING && !m.isInitiator));
 
   return (
     <Layout>
@@ -136,9 +137,9 @@ const MatchesPage = () => {
         {/* Filter Tabs */}
         <div className="bg-white rounded-lg shadow-sm p-1 mb-6 flex gap-1">
           <button
-            onClick={() => setFilter('all')}
+            onClick={() => setFilter(MATCH_FILTER.ALL)}
             className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              filter === 'all'
+              filter === MATCH_FILTER.ALL
                 ? 'bg-primary-600 text-white'
                 : 'text-gray-600 hover:bg-gray-100'
             }`}
@@ -146,24 +147,24 @@ const MatchesPage = () => {
             All ({matches.length})
           </button>
           <button
-            onClick={() => setFilter('pending')}
+            onClick={() => setFilter(MATCH_FILTER.PENDING)}
             className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              filter === 'pending'
+              filter === MATCH_FILTER.PENDING
                 ? 'bg-primary-600 text-white'
                 : 'text-gray-600 hover:bg-gray-100'
             }`}
           >
-            Pending ({matches.filter(m => m.status === 'pending').length})
+            Pending ({matches.filter(m => m.status === MATCH_STATUS.PENDING).length})
           </button>
           <button
-            onClick={() => setFilter('accepted')}
+            onClick={() => setFilter(MATCH_FILTER.ACCEPTED)}
             className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              filter === 'accepted'
+              filter === MATCH_FILTER.ACCEPTED
                 ? 'bg-primary-600 text-white'
                 : 'text-gray-600 hover:bg-gray-100'
             }`}
           >
-            Active ({matches.filter(m => m.status === 'accepted').length})
+            Active ({matches.filter(m => m.status === MATCH_STATUS.ACCEPTED).length})
           </button>
         </div>
 

frontend/src/pages/RatePartnerPage.jsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { matchesAPI } from '../services/api';
 import { Star, Loader2 } from 'lucide-react';
+import { MATCH_STATUS } from '../constants';
 
 const RatePartnerPage = () => {
   const { slug } = useParams();
@@ -24,7 +25,7 @@ const RatePartnerPage = () => {
         setMatch(result.data);
 
         // Check if this match can be rated
-        if (result.data.status !== 'accepted' && result.data.status !== 'completed') {
+        if (result.data.status !== MATCH_STATUS.ACCEPTED && result.data.status !== MATCH_STATUS.COMPLETED) {
           alert('This match must be accepted before rating.');
           navigate('/matches');
           return;