Add subtitle submissions viewing feature - new UI panel below video player

client/src/pages/WeeklyPractice.tsx

@@ -68,6 +68,16 @@ interface VideoInfo {
   currentSegment: number;
 }
 
+interface SubtitleSubmission {
+  _id: string;
+  username: string;
+  chineseTranslation: string;
+  submissionDate: string;
+  isAnonymous: boolean;
+  status?: string;
+  notes?: string;
+}
+
 const WeeklyPractice: React.FC = () => {
   const [selectedWeek, setSelectedWeek] = useState<number>(() => {
     const saved = localStorage.getItem('selectedWeeklyPracticeWeek');
@@ -114,6 +124,12 @@ const WeeklyPractice: React.FC = () => {
   const [editingSegment, setEditingSegment] = useState<number | null>(null);
   const [currentVideoTime, setCurrentVideoTime] = useState<number>(0);
   const [currentDisplayedSubtitle, setCurrentDisplayedSubtitle] = useState<string>('');
+  
+  // Submissions viewing state
+  const [showSubmissions, setShowSubmissions] = useState(false);
+  const [submissions, setSubmissions] = useState<SubtitleSubmission[]>([]);
+  const [loadingSubmissions, setLoadingSubmissions] = useState(false);
+  const [submissionCount, setSubmissionCount] = useState(0);
 
   const weeks = [1, 2, 3, 4, 5, 6];
 
@@ -155,6 +171,11 @@ const WeeklyPractice: React.FC = () => {
         video.addEventListener('timeupdate', checkEndTime);
       }
     }
+    
+    // Fetch submissions for this segment if submissions are shown
+    if (showSubmissions) {
+      fetchSubmissionsForSegment(segmentId);
+    }
   };
 
   const parseTimeToSeconds = (timeString: string): number => {
@@ -320,6 +341,27 @@ const WeeklyPractice: React.FC = () => {
         setTimeout(() => setSaveStatus('Save'), 2000);
       }
       
+      // Also save as a submission
+      try {
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        const submissionResponse = await api.post('/api/subtitle-submissions/submit', {
+          segmentId: currentSegment,
+          chineseTranslation: targetText,
+          isAnonymous: false,
+          weekNumber: 2
+        });
+        
+        if (submissionResponse.data.success) {
+          console.log('✅ Translation submitted successfully');
+          // Refresh submissions if they're currently shown
+          if (showSubmissions) {
+            fetchSubmissionsForSegment(currentSegment);
+          }
+        }
+      } catch (submissionError: any) {
+        console.warn('⚠️ Submission save failed:', submissionError.message);
+      }
+      
       // Clear the input field after saving
       setTargetText('');
       setCharacterCount(0);
@@ -453,6 +495,44 @@ const WeeklyPractice: React.FC = () => {
     }
   };
 
+  // Fetch submissions for a specific segment
+  const fetchSubmissionsForSegment = async (segmentId: number) => {
+    try {
+      setLoadingSubmissions(true);
+      console.log('🔧 Fetching submissions for segment:', segmentId);
+      
+      const response = await api.get(`/api/subtitle-submissions/segment/${segmentId}?week=2`);
+      
+      if (response.data.success) {
+        setSubmissions(response.data.data);
+        setSubmissionCount(response.data.count);
+        console.log('✅ Fetched submissions:', response.data.count);
+      } else {
+        console.error('❌ Failed to fetch submissions:', response.data);
+        setSubmissions([]);
+        setSubmissionCount(0);
+      }
+    } catch (error) {
+      console.error('❌ Error fetching submissions:', error);
+      setSubmissions([]);
+      setSubmissionCount(0);
+    } finally {
+      setLoadingSubmissions(false);
+    }
+  };
+
+  // Toggle submissions panel
+  const toggleSubmissions = async () => {
+    if (!showSubmissions) {
+      // Show submissions and fetch data
+      setShowSubmissions(true);
+      await fetchSubmissionsForSegment(currentSegment);
+    } else {
+      // Hide submissions
+      setShowSubmissions(false);
+    }
+  };
+
   // Load subtitles when component mounts
   React.useEffect(() => {
     if (selectedWeek === 2) {
@@ -1284,6 +1364,98 @@ const WeeklyPractice: React.FC = () => {
                 </div>
               </div>
             </div>
+            
+            {/* Submissions Panel - Only show for Week 2 subtitling */}
+            {selectedWeek === 2 && (
+              <div className="mt-6">
+                <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-semibold text-gray-900">
+                      👥 View Submissions for Segment {currentSegment}
+                    </h3>
+                    <button
+                      onClick={toggleSubmissions}
+                      className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors duration-200 ${
+                        showSubmissions 
+                          ? 'bg-gray-500 hover:bg-gray-600 text-white' 
+                          : 'bg-purple-600 hover:bg-purple-700 text-white'
+                      }`}
+                    >
+                      <span>{showSubmissions ? 'Hide Submissions' : 'Show Submissions'}</span>
+                      <span>{showSubmissions ? '▼' : '▶'}</span>
+                    </button>
+                  </div>
+                  
+                  {showSubmissions && (
+                    <div className="space-y-4">
+                      {loadingSubmissions ? (
+                        <div className="text-center py-8">
+                          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
+                          <p className="text-gray-600">Loading submissions...</p>
+                        </div>
+                      ) : submissions.length > 0 ? (
+                        <>
+                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {submissions.map((submission) => (
+                              <div key={submission._id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                                <div className="flex items-center justify-between mb-2">
+                                  <span className="font-medium text-gray-900">
+                                    {submission.username}
+                                  </span>
+                                  <span className="text-xs text-gray-500">
+                                    {new Date(submission.submissionDate).toLocaleString()}
+                                  </span>
+                                </div>
+                                <div className="bg-white rounded p-3 border border-gray-200">
+                                  <p className="text-gray-800 text-sm leading-relaxed">
+                                    {submission.chineseTranslation}
+                                  </p>
+                                </div>
+                                {submission.status && (
+                                  <div className="mt-2">
+                                    <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                                      submission.status === 'approved' ? 'bg-green-100 text-green-800' :
+                                      submission.status === 'reviewed' ? 'bg-blue-100 text-blue-800' :
+                                      'bg-gray-100 text-gray-800'
+                                    }`}>
+                                      {submission.status}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                          <div className="flex justify-between items-center pt-4 border-t border-gray-200">
+                            <span className="text-sm text-gray-600">
+                              {submissionCount} submission{submissionCount !== 1 ? 's' : ''} for this segment
+                            </span>
+                            <button
+                              onClick={() => {
+                                // Export functionality can be added here
+                                console.log('Export submissions for segment', currentSegment);
+                              }}
+                              className="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded hover:bg-purple-200 transition-colors"
+                            >
+                              Export This Segment
+                            </button>
+                          </div>
+                        </>
+                      ) : (
+                        <div className="text-center py-8">
+                          <div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+                            <span className="text-2xl">📝</span>
+                          </div>
+                          <h4 className="text-lg font-medium text-gray-900 mb-2">No submissions yet</h4>
+                          <p className="text-gray-600">
+                            Be the first to submit a translation for this segment!
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
         ) : (
           /* Weekly Practice */

client/src/services/api.ts

@@ -19,6 +19,7 @@ console.log('Environment variables:', {
 });
 console.log('Build timestamp:', new Date().toISOString()); // FORCE REBUILD - Video seeking and subtitle syncing
 console.log('🔄 FORCE REBUILD: Admin API routes fixed - should resolve 404 errors');
+console.log('🔄 FORCE REBUILD: Subtitle submissions feature added - new UI and API endpoints');
 
 // Request interceptor to add auth token and user role
 api.interceptors.request.use(
@@ -28,12 +29,17 @@ api.interceptors.request.use(
       config.headers.Authorization = `Bearer ${token}`;
     }
     
-    // Add user role to headers
+    // Add user role and info to headers
     const user = localStorage.getItem('user');
     if (user) {
       try {
         const userData = JSON.parse(user);
         config.headers['user-role'] = userData.role || 'visitor';
+        config.headers['user-info'] = JSON.stringify({
+          _id: userData._id,
+          username: userData.username,
+          role: userData.role
+        });
       } catch (error) {
         config.headers['user-role'] = 'visitor';
       }