Upload src/pages/Profile.tsx with huggingface_hub

src/pages/Profile.tsx

@@ -15,6 +15,7 @@ interface User {
   name: string;
   email: string;
   role?: string;
+  displayName?: string;
 }
 
 interface SystemStats {
@@ -83,7 +84,7 @@ const Manage: React.FC = () => {
   const [editingExample, setEditingExample] = useState<PracticeExample | null>(null);
   const [editingTutorialTask, setEditingTutorialTask] = useState<TutorialTask | null>(null);
   const [editingWeeklyPractice, setEditingWeeklyPractice] = useState<WeeklyPractice | null>(null);
-  const [newUser, setNewUser] = useState({ name: '', email: '', role: 'student' });
+  const [newUser, setNewUser] = useState({ name: '', displayName: '', email: '', role: 'student' });
   const [newExample, setNewExample] = useState({ 
     title: '', 
     content: '', 
@@ -135,12 +136,8 @@ const Manage: React.FC = () => {
   const fetchAdminStats = useCallback(async () => {
     try {
       setStatsLoading(true);
-      const response = await api.get('/auth/admin/stats');
-      
-      if (response.status >= 200 && response.status < 300) {
-        const data = response.data;
-        setStats(data.stats);
-      }
+      const response = await api.get('/api/auth/admin/stats');
+      setStats(response.data.stats);
     } catch (error) {
       console.error('Failed to fetch admin stats:', error);
     } finally {
@@ -151,12 +148,8 @@ const Manage: React.FC = () => {
   const fetchPracticeExamples = useCallback(async () => {
     try {
       setExamplesLoading(true);
-      const response = await api.get('/auth/admin/practice-examples');
-      
-      if (response.status >= 200 && response.status < 300) {
-        const data = response.data;
-        setExamples(data.examples);
-      }
+      const response = await api.get('/api/auth/admin/practice-examples');
+      setExamples(response.data.examples);
     } catch (error) {
       console.error('Failed to fetch practice examples:', error);
     } finally {
@@ -167,12 +160,8 @@ const Manage: React.FC = () => {
   const fetchUsers = useCallback(async () => {
     try {
       setUsersLoading(true);
-      const response = await api.get('/auth/admin/users');
-      
-      if (response.status >= 200 && response.status < 300) {
-        const data = response.data;
-        setUsers(data.users);
-      }
+      const response = await api.get('/api/auth/admin/users');
+      setUsers(response.data.users);
     } catch (error) {
       console.error('Failed to fetch users:', error);
     } finally {
@@ -183,12 +172,8 @@ const Manage: React.FC = () => {
   const fetchTutorialTasks = useCallback(async () => {
     try {
       setTutorialTasksLoading(true);
-      const response = await api.get('/auth/admin/tutorial-tasks');
-      
-      if (response.status >= 200 && response.status < 300) {
-        const data = response.data;
-        setTutorialTasks(data.tutorialTasks);
-      }
+      const response = await api.get('/api/auth/admin/tutorial-tasks');
+      setTutorialTasks(response.data.tutorialTasks);
     } catch (error) {
       console.error('Failed to fetch tutorial tasks:', error);
     } finally {
@@ -199,12 +184,8 @@ const Manage: React.FC = () => {
   const fetchWeeklyPractice = useCallback(async () => {
     try {
       setWeeklyPracticeLoading(true);
-      const response = await api.get('/auth/admin/weekly-practice');
-      
-      if (response.status >= 200 && response.status < 300) {
-        const data = response.data;
-        setWeeklyPractice(data.weeklyPractice);
-      }
+      const response = await api.get('/api/auth/admin/weekly-practice');
+      setWeeklyPractice(response.data.weeklyPractice);
     } catch (error) {
       console.error('Failed to fetch weekly practice:', error);
     } finally {
@@ -224,16 +205,11 @@ const Manage: React.FC = () => {
 
   const addUser = async () => {
     try {
-      const response = await api.post('/auth/admin/users', newUser);
-      
-      if (response.status >= 200 && response.status < 300) {
-        setNewUser({ name: '', email: '', role: 'student' });
-        setShowAddUser(false);
-        await fetchUsers();
-        alert('User added successfully!');
-      } else {
-        alert(`Failed to add user: ${response.data?.error || 'Unknown error'}`);
-      }
+      const response = await api.post('/api/auth/admin/users', newUser);
+      setNewUser({ name: '', email: '', role: 'student' });
+      setShowAddUser(false);
+      await fetchUsers();
+      alert('User added successfully!');
     } catch (error) {
       console.error('Failed to add user:', error);
       alert('Failed to add user');
@@ -242,15 +218,10 @@ const Manage: React.FC = () => {
 
   const updateUser = async (email: string, updates: Partial<User>) => {
     try {
-      const response = await api.put(`/auth/admin/users/${email}`, updates);
-      
-      if (response.status >= 200 && response.status < 300) {
-        setEditingUser(null);
-        await fetchUsers();
-        alert('User updated successfully!');
-      } else {
-        alert(`Failed to update user: ${response.data?.error || 'Unknown error'}`);
-      }
+      await api.put(`/api/auth/admin/users/${email}`, updates);
+      setEditingUser(null);
+      await fetchUsers();
+      alert('User updated successfully!');
     } catch (error) {
       console.error('Failed to update user:', error);
       alert('Failed to update user');
@@ -261,14 +232,9 @@ const Manage: React.FC = () => {
     if (!window.confirm('Are you sure you want to delete this user?')) return;
     
     try {
-      const response = await api.delete(`/auth/admin/users/${email}`);
-      
-      if (response.status >= 200 && response.status < 300) {
-        await fetchUsers();
-        alert('User deleted successfully!');
-      } else {
-        alert(`Failed to delete user: ${response.data?.error || 'Unknown error'}`);
-      }
+      await api.delete(`/api/auth/admin/users/${email}`);
+      await fetchUsers();
+      alert('User deleted successfully!');
     } catch (error) {
       console.error('Failed to delete user:', error);
       alert('Failed to delete user');
@@ -277,31 +243,17 @@ const Manage: React.FC = () => {
 
   const addExample = async () => {
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch('/api/auth/admin/practice-examples', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(newExample)
+      await api.post('/api/auth/admin/practice-examples', newExample);
+      setNewExample({ 
+        title: '', 
+        content: '', 
+        sourceLanguage: 'English', 
+        sourceCulture: 'American', 
+        difficulty: 'intermediate' 
       });
-      
-      if (response.ok) {
-        setNewExample({ 
-          title: '', 
-          content: '', 
-          sourceLanguage: 'English', 
-          sourceCulture: 'American', 
-          difficulty: 'intermediate' 
-        });
-        setShowAddExample(false);
-        await fetchPracticeExamples();
-        alert('Example added successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to add example: ${error.error}`);
-      }
+      setShowAddExample(false);
+      await fetchPracticeExamples();
+      alert('Example added successfully!');
     } catch (error) {
       console.error('Failed to add example:', error);
       alert('Failed to add example');
@@ -310,24 +262,10 @@ const Manage: React.FC = () => {
 
   const updateExample = async (id: string, updates: Partial<PracticeExample>) => {
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/practice-examples/${id}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(updates)
-      });
-      
-      if (response.ok) {
-        setEditingExample(null);
-        await fetchPracticeExamples();
-        alert('Example updated successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to update example: ${error.error}`);
-      }
+      await api.put(`/api/auth/admin/practice-examples/${id}`, updates);
+      setEditingExample(null);
+      await fetchPracticeExamples();
+      alert('Example updated successfully!');
     } catch (error) {
       console.error('Failed to update example:', error);
       alert('Failed to update example');
@@ -338,22 +276,9 @@ const Manage: React.FC = () => {
     if (!window.confirm('Are you sure you want to delete this example?')) return;
     
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/practice-examples/${id}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      if (response.ok) {
-        await fetchPracticeExamples();
-        alert('Example deleted successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to delete example: ${error.error}`);
-      }
+      await api.delete(`/api/auth/admin/practice-examples/${id}`);
+      await fetchPracticeExamples();
+      alert('Example deleted successfully!');
     } catch (error) {
       console.error('Failed to delete example:', error);
       alert('Failed to delete example');
@@ -363,36 +288,18 @@ const Manage: React.FC = () => {
   // Tutorial Tasks CRUD
   const addTutorialTask = async () => {
     try {
-      const token = localStorage.getItem('token');
-      const userData = localStorage.getItem('user');
-      const user = userData ? JSON.parse(userData) : null;
-      
-      const response = await fetch('/api/auth/admin/tutorial-tasks', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user?.role || 'student'
-        },
-        body: JSON.stringify(newTutorialTask)
+      await api.post('/api/auth/admin/tutorial-tasks', newTutorialTask);
+      setNewTutorialTask({
+        title: '',
+        content: '',
+        sourceLanguage: 'English',
+        sourceCulture: 'American',
+        weekNumber: 1,
+        difficulty: 'intermediate'
       });
-      
-      if (response.ok) {
-        setNewTutorialTask({
-          title: '',
-          content: '',
-          sourceLanguage: 'English',
-          sourceCulture: 'American',
-          weekNumber: 1,
-          difficulty: 'intermediate'
-        });
-        setShowAddTutorialTask(false);
-        await fetchTutorialTasks();
-        alert('Tutorial task added successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to add tutorial task: ${error.error}`);
-      }
+      setShowAddTutorialTask(false);
+      await fetchTutorialTasks();
+      alert('Tutorial task added successfully!');
     } catch (error) {
       console.error('Failed to add tutorial task:', error);
       alert('Failed to add tutorial task');
@@ -401,24 +308,10 @@ const Manage: React.FC = () => {
 
   const updateTutorialTask = async (id: string, updates: Partial<TutorialTask>) => {
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/tutorial-tasks/${id}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(updates)
-      });
-      
-      if (response.ok) {
-        setEditingTutorialTask(null);
-        await fetchTutorialTasks();
-        alert('Tutorial task updated successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to update tutorial task: ${error.error}`);
-      }
+      await api.put(`/api/auth/admin/tutorial-tasks/${id}`, updates);
+      setEditingTutorialTask(null);
+      await fetchTutorialTasks();
+      alert('Tutorial task updated successfully!');
     } catch (error) {
       console.error('Failed to update tutorial task:', error);
       alert('Failed to update tutorial task');
@@ -429,22 +322,9 @@ const Manage: React.FC = () => {
     if (!window.confirm('Are you sure you want to delete this tutorial task?')) return;
     
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/tutorial-tasks/${id}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      if (response.ok) {
-        await fetchTutorialTasks();
-        alert('Tutorial task deleted successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to delete tutorial task: ${error.error}`);
-      }
+      await api.delete(`/api/auth/admin/tutorial-tasks/${id}`);
+      await fetchTutorialTasks();
+      alert('Tutorial task deleted successfully!');
     } catch (error) {
       console.error('Failed to delete tutorial task:', error);
       alert('Failed to delete tutorial task');
@@ -454,36 +334,18 @@ const Manage: React.FC = () => {
   // Weekly Practice CRUD
   const addWeeklyPractice = async () => {
     try {
-      const token = localStorage.getItem('token');
-      const userData = localStorage.getItem('user');
-      const user = userData ? JSON.parse(userData) : null;
-      
-      const response = await fetch('/api/auth/admin/weekly-practice', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user?.role || 'student'
-        },
-        body: JSON.stringify(newWeeklyPractice)
+      await api.post('/api/auth/admin/weekly-practice', newWeeklyPractice);
+      setNewWeeklyPractice({
+        title: '',
+        content: '',
+        sourceLanguage: 'English',
+        sourceCulture: 'American',
+        weekNumber: 1,
+        difficulty: 'intermediate'
       });
-      
-      if (response.ok) {
-        setNewWeeklyPractice({
-          title: '',
-          content: '',
-          sourceLanguage: 'English',
-          sourceCulture: 'American',
-          weekNumber: 1,
-          difficulty: 'intermediate'
-        });
-        setShowAddWeeklyPractice(false);
-        await fetchWeeklyPractice();
-        alert('Weekly practice added successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to add weekly practice: ${error.error}`);
-      }
+      setShowAddWeeklyPractice(false);
+      await fetchWeeklyPractice();
+      alert('Weekly practice added successfully!');
     } catch (error) {
       console.error('Failed to add weekly practice:', error);
       alert('Failed to add weekly practice');
@@ -492,24 +354,10 @@ const Manage: React.FC = () => {
 
   const updateWeeklyPractice = async (id: string, updates: Partial<WeeklyPractice>) => {
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/weekly-practice/${id}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(updates)
-      });
-      
-      if (response.ok) {
-        setEditingWeeklyPractice(null);
-        await fetchWeeklyPractice();
-        alert('Weekly practice updated successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to update weekly practice: ${error.error}`);
-      }
+      await api.put(`/api/auth/admin/weekly-practice/${id}`, updates);
+      setEditingWeeklyPractice(null);
+      await fetchWeeklyPractice();
+      alert('Weekly practice updated successfully!');
     } catch (error) {
       console.error('Failed to update weekly practice:', error);
       alert('Failed to update weekly practice');
@@ -520,22 +368,9 @@ const Manage: React.FC = () => {
     if (!window.confirm('Are you sure you want to delete this weekly practice?')) return;
     
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/auth/admin/weekly-practice/${id}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      if (response.ok) {
-        await fetchWeeklyPractice();
-        alert('Weekly practice deleted successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to delete weekly practice: ${error.error}`);
-      }
+      await api.delete(`/api/auth/admin/weekly-practice/${id}`);
+      await fetchWeeklyPractice();
+      alert('Weekly practice deleted successfully!');
     } catch (error) {
       console.error('Failed to delete weekly practice:', error);
       alert('Failed to delete weekly practice');
@@ -544,55 +379,20 @@ const Manage: React.FC = () => {
 
   const addTranslationBrief = async () => {
     try {
-      const token = localStorage.getItem('token');
-      const userData = localStorage.getItem('user');
-      const user = userData ? JSON.parse(userData) : null;
-      
-      const response = await fetch('/api/auth/admin/translation-brief', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user?.role || 'student'
-        },
-        body: JSON.stringify(newTranslationBrief)
+      await api.post('/api/auth/admin/translation-brief', newTranslationBrief);
+      setShowAddTranslationBrief(false);
+      setNewTranslationBrief({
+        weekNumber: 1,
+        translationBrief: '',
+        type: 'tutorial'
       });
-      
-      if (response.ok) {
-        setShowAddTranslationBrief(false);
-        setNewTranslationBrief({
-          weekNumber: 1,
-          translationBrief: '',
-          type: 'tutorial'
-        });
-        alert('Translation brief added successfully!');
-      } else {
-        const error = await response.json();
-        alert(`Failed to add translation brief: ${error.error}`);
-      }
+      alert('Translation brief added successfully!');
     } catch (error) {
       console.error('Failed to add translation brief:', error);
       alert('Failed to add translation brief');
     }
   };
 
-  const initializeWeeklyPractice = async () => {
-    try {
-      const response = await api.post('/search/initialize-practice-examples');
-      
-      if (response.status >= 200 && response.status < 300) {
-        alert('Weekly practice data initialized successfully!');
-        await fetchWeeklyPractice();
-      } else {
-        console.error('Failed to initialize weekly practice:', response.data);
-        alert('Failed to initialize weekly practice data');
-      }
-    } catch (error) {
-      console.error('Failed to initialize weekly practice:', error);
-      alert('Failed to initialize weekly practice data');
-    }
-  };
-
   const handleLogout = () => {
     localStorage.removeItem('token');
     localStorage.removeItem('user');
@@ -685,6 +485,13 @@ const Manage: React.FC = () => {
                   onChange={(e) => setNewUser({...newUser, name: e.target.value})}
                   className="w-full px-3 py-2 border border-gray-300 rounded-md"
                 />
+                <input
+                  type="text"
+                  placeholder="Display Name (optional)"
+                  value={newUser.displayName}
+                  onChange={(e) => setNewUser({...newUser, displayName: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
                 <input
                   type="email"
                   placeholder="Email"
@@ -765,6 +572,13 @@ const Manage: React.FC = () => {
                     onChange={(e) => setEditingUser({...editingUser, name: e.target.value})}
                     className="w-full px-3 py-2 border border-gray-300 rounded-md"
                   />
+                  <input
+                    type="text"
+                    placeholder="Display Name (optional)"
+                    value={editingUser.displayName || ''}
+                    onChange={(e) => setEditingUser({...editingUser, displayName: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
                   <input
                     type="email"
                     placeholder="Email"
@@ -1370,12 +1184,6 @@ const Manage: React.FC = () => {
           >
             Refresh
           </button>
-          <button 
-            onClick={initializeWeeklyPractice}
-            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
-          >
-            Initialize Week 1 Practice
-          </button>
         </div>
 
         {/* Weekly Practice List */}