feat: implement core dashboard functionality with role-based navigation and management pages

tusquake · tusquake · commit 0bd298afa9d3 · 2026-06-13T11:00:48.000+05:30
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -51,6 +51,7 @@ const AppContent = () => {
   const [subModalOpen, setSubModalOpen] = useState(false);
   const [requiredTier, setRequiredTier] = useState('basic');
   const [timeLeft, setTimeLeft] = useState(null);
+  const [navBlocker, setNavBlocker] = useState(null); // { message, onConfirm, onCancel }
 
   const isSubscriptionExpired = user && user.subscriptionTier !== 'none' && user.subscriptionExpiresAt && new Date(user.subscriptionExpiresAt).getTime() < Date.now();
 
@@ -64,31 +65,43 @@ const AppContent = () => {
           const targetPath = href.replace(window.location.origin, '');
           if (targetPath === window.location.pathname) return;
 
-          const confirmed = window.confirm(window.activeSessionBlocker.message);
-          if (!confirmed) {
-            e.preventDefault();
-            e.stopPropagation();
-          } else {
-            if (typeof window.activeSessionBlocker.onConfirm === 'function') {
-              window.activeSessionBlocker.onConfirm();
+          e.preventDefault();
+          e.stopPropagation();
+
+          setNavBlocker({
+            message: window.activeSessionBlocker.message,
+            onConfirm: () => {
+              if (typeof window.activeSessionBlocker.onConfirm === 'function') {
+                window.activeSessionBlocker.onConfirm();
+              }
+              window.activeSessionBlocker = null;
+              window.location.href = href;
+            },
+            onCancel: () => {
+              setNavBlocker(null);
             }
-            window.activeSessionBlocker = null;
-          }
+          });
         }
       }
     };
 
     const handlePopState = (e) => {
       if (window.activeSessionBlocker) {
-        const confirmed = window.confirm(window.activeSessionBlocker.message);
-        if (!confirmed) {
-          window.history.pushState(null, null, window.location.pathname);
-        } else {
-          if (typeof window.activeSessionBlocker.onConfirm === 'function') {
-            window.activeSessionBlocker.onConfirm();
+        window.history.pushState(null, null, window.location.pathname);
+
+        setNavBlocker({
+          message: window.activeSessionBlocker.message,
+          onConfirm: () => {
+            if (typeof window.activeSessionBlocker.onConfirm === 'function') {
+              window.activeSessionBlocker.onConfirm();
+            }
+            window.activeSessionBlocker = null;
+            window.history.go(-2);
+          },
+          onCancel: () => {
+            setNavBlocker(null);
           }
-          window.activeSessionBlocker = null;
-        }
+        });
       }
     };
 
@@ -308,6 +321,48 @@ const AppContent = () => {
         />
       </Routes>
 
+      {/* Nice custom Confirmation / Warning Dialog */}
+      {navBlocker && (
+        <div className="fixed inset-0 z-[10000] bg-dark-950/70 backdrop-blur-md flex items-center justify-center p-4 animate-fade-in">
+          <div className="max-w-md w-full bg-white dark:bg-dark-900 border border-dark-200 dark:border-dark-800 rounded-3xl p-6 text-center shadow-2xl relative overflow-hidden">
+            {/* Background design glow */}
+            <div className="absolute -right-10 -top-10 w-32 h-32 bg-primary-500/10 rounded-full blur-2xl pointer-events-none" />
+            <div className="absolute -left-10 -bottom-10 w-32 h-32 bg-rose-500/10 rounded-full blur-2xl pointer-events-none" />
+
+            {/* Warning Icon */}
+            <div className="w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center mx-auto mb-4 border border-amber-500/25 animate-bounce-slow">
+              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            
+            <h3 className="text-lg font-bold text-dark-900 dark:text-white mb-2 font-display">Unsaved Session Warning</h3>
+            <p className="text-xs text-dark-550 dark:text-dark-400 mb-6 leading-relaxed">
+              {navBlocker.message}
+            </p>
+            
+            <div className="flex gap-3">
+              <button 
+                onClick={navBlocker.onCancel}
+                className="flex-1 py-3 rounded-xl border border-dark-200 dark:border-dark-850 hover:bg-dark-50 dark:hover:bg-dark-800 text-dark-700 dark:text-dark-300 text-xs font-semibold cursor-pointer transition-colors"
+              >
+                Stay & Resume
+              </button>
+              <button 
+                onClick={() => {
+                  const onConfirm = navBlocker.onConfirm;
+                  setNavBlocker(null);
+                  onConfirm();
+                }}
+                className="flex-1 py-3 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold cursor-pointer shadow-lg shadow-amber-500/10 transition-colors"
+              >
+                Yes, Leave Page
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <SubscriptionModal 
         isOpen={subModalOpen} 
         onClose={() => {
diff --git a/client/src/pages/AIInterview.jsx b/client/src/pages/AIInterview.jsx
@@ -82,6 +82,7 @@ const AIInterview = () => {
     const [difficulty, setDifficulty] = useState('Medium');
     const [yoe, setYoe] = useState('1-3 years');
     const [targetRole, setTargetRole] = useState('Software Engineer');
+    const [confirmModal, setConfirmModal] = useState(null); // { title, message, onConfirm }
 
     useEffect(() => {
         const updateVoices = () => {
@@ -456,10 +457,12 @@ const AIInterview = () => {
     // Speech recognition helper
     const startListening = () => {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (!SpeechRecognition) {
-            alert('Speech recognition not supported in this browser. Please use Google Chrome or Safari.');
+            setConfirmModal({
+                type: 'alert',
+                title: 'Speech Recognition Unsupported',
+                message: 'Speech recognition is not supported in this browser. Please use Google Chrome or Safari for the best experience.'
+            });
             return;
-        }
         
         window.speechSynthesis.cancel();
         setIsAiSpeaking(false);
@@ -535,27 +538,30 @@ const AIInterview = () => {
     };
 
     const handleExitSession = () => {
-        const confirmed = window.confirm("Warning: You are currently in an active interview session. Leaving will immediately terminate the interview, and all progress will be lost. Are you sure you want to exit?");
-        if (!confirmed) return;
-
-        window.speechSynthesis.cancel();
-        if (idleTimerRef.current) {
-            clearTimeout(idleTimerRef.current);
-            idleTimerRef.current = null;
-        }
-        if (recognitionRef.current) {
-            try {
-                recognitionRef.current.stop();
-            } catch (e) {
-                console.error(e);
+        setConfirmModal({
+            title: 'End Active Interview?',
+            message: 'Warning: You are currently in an active interview session. Leaving will immediately terminate the interview, and all progress will be lost. Are you sure you want to exit?',
+            onConfirm: () => {
+                window.speechSynthesis.cancel();
+                if (idleTimerRef.current) {
+                    clearTimeout(idleTimerRef.current);
+                    idleTimerRef.current = null;
+                }
+                if (recognitionRef.current) {
+                    try {
+                        recognitionRef.current.stop();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                    recognitionRef.current = null;
+                }
+                setStage('idle');
+                setQuestion('');
+                setAnswer('');
+                setFeedback(null);
+                setSessionLogs([]);
             }
-            recognitionRef.current = null;
-        }
-        setStage('idle');
-        setQuestion('');
-        setAnswer('');
-        setFeedback(null);
-        setSessionLogs([]);
+        });
     };
 
     const generateQuestion = async () => {
@@ -1091,17 +1097,21 @@ JSON Evaluation:`;
     };
 
     const clearHistory = async () => {
-        if (window.confirm('Are you sure you want to clear your entire interview log history?')) {
-            try {
-                await interviewAPI.clear();
-                setHistory([]);
-                localStorage.removeItem('codeforge_interview_history');
-                showToast('Interview log history cleared');
-            } catch (err) {
-                console.error('Failed to clear interview logs from DB', err);
-                showToast('Failed to clear history. Try again.');
+        setConfirmModal({
+            title: 'Clear History?',
+            message: 'Are you sure you want to clear your entire interview log history? This action cannot be undone.',
+            onConfirm: async () => {
+                try {
+                    await interviewAPI.clear();
+                    setHistory([]);
+                    localStorage.removeItem('codeforge_interview_history');
+                    showToast('Interview log history cleared');
+                } catch (err) {
+                    console.error('Failed to clear interview logs from DB', err);
+                    showToast('Failed to clear history. Try again.');
+                }
             }
-        }
+        });
     };
 
     // Trigger evaluation when answer is set via useEffect
@@ -2095,6 +2105,46 @@ JSON Evaluation:`;
             onClose={() => setShowReviewModal(false)}
             defaultTriggerAction="interview"
         />
+
+        {confirmModal && (
+            <div className="fixed inset-0 z-[100] bg-dark-950/70 backdrop-blur-md flex items-center justify-center p-4 animate-fade-in">
+                <div className="max-w-md w-full bg-white dark:bg-dark-900 border border-dark-200 dark:border-dark-800 rounded-3xl p-6 text-center shadow-2xl relative overflow-hidden">
+                    {/* Background design glow */}
+                    <div className="absolute -right-10 -top-10 w-32 h-32 bg-primary-500/10 rounded-full blur-2xl pointer-events-none" />
+                    <div className="absolute -left-10 -bottom-10 w-32 h-32 bg-rose-500/10 rounded-full blur-2xl pointer-events-none" />
+
+                    {/* Warning Icon */}
+                    <div className="w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center mx-auto mb-4 border border-amber-500/25 animate-bounce-slow">
+                        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                        </svg>
+                    </div>
+                    
+                    <h3 className="text-lg font-bold text-dark-900 dark:text-white mb-2">{confirmModal.title}</h3>
+                    <p className="text-xs text-dark-550 dark:text-dark-400 mb-6 leading-relaxed">
+                        {confirmModal.message}
+                    </p>
+                    
+                    <div className="flex gap-3">
+                        <button 
+                            onClick={() => setConfirmModal(null)}
+                            className="flex-1 py-3 rounded-xl border border-dark-200 dark:border-dark-850 hover:bg-dark-50 dark:hover:bg-dark-800 text-dark-700 dark:text-dark-300 text-xs font-semibold cursor-pointer transition-colors"
+                        >
+                            Cancel
+                        </button>
+                        <button 
+                            onClick={() => {
+                                confirmModal.onConfirm();
+                                setConfirmModal(null);
+                            }}
+                            className="flex-1 py-3 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold cursor-pointer shadow-lg shadow-amber-500/10 transition-colors"
+                        >
+                            Confirm
+                        </button>
+                    </div>
+                </div>
+            </div>
+        )}
         </>
     );
 };
diff --git a/client/src/pages/CollaborativeWorkspace.jsx b/client/src/pages/CollaborativeWorkspace.jsx
@@ -938,11 +938,15 @@ export default function CollaborativeWorkspace() {
             {/* Exit Room */}
             <button
               onClick={() => {
-                const confirmed = window.confirm("Warning: Leaving this room will disconnect you from the editor, voice channel, and active workspace. Are you sure you want to exit?");
-                if (confirmed) {
-                  setInLobby(true);
-                  navigate('/code-editor');
-                }
+                setModalConfig({
+                  type: 'confirm',
+                  title: 'Leave Workspace?',
+                  message: 'Warning: Leaving this room will disconnect you from the editor, voice channel, and active workspace. Are you sure you want to exit?',
+                  onConfirm: () => {
+                    setInLobby(true);
+                    navigate('/code-editor');
+                  }
+                });
               }}
               className="px-3 py-1.5 rounded-xl bg-rose-600/10 hover:bg-rose-600/20 border border-rose-500/20 text-xs text-rose-400 flex items-center gap-1.5 transition"
             >
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
@@ -84,6 +84,7 @@ const Dashboard = () => {
     const [submitting, setSubmitting] = useState(false);
     const [uploading, setUploading] = useState(false);
     const [imagePreview, setImagePreview] = useState(null);
+    const [confirmModal, setConfirmModal] = useState(null); // { title, message, onConfirm }
 
     useEffect(() => {
         if (!authLoading) {
@@ -211,25 +212,29 @@ const Dashboard = () => {
         }
     };
 
-    const handleDelete = async (type, id) => {
-        if (!confirm('Are you sure you want to delete this item?')) return;
-
-        try {
-            if (type === 'project') {
-                await projectsAPI.delete(id);
-            } else if (type === 'certificate') {
-                await certificatesAPI.delete(id);
-            } else if (type === 'contact') {
-                await contactAPI.delete(id);
-            } else if (type === 'learningTopic') {
-                await learningAPI.delete(id);
-            } else if (type === 'task') {
-                await tasksAPI.delete(id);
+    const handleDelete = (type, id) => {
+        setConfirmModal({
+            title: 'Delete Item?',
+            message: 'Are you sure you want to delete this item? This action cannot be undone.',
+            onConfirm: async () => {
+                try {
+                    if (type === 'project') {
+                        await projectsAPI.delete(id);
+                    } else if (type === 'certificate') {
+                        await certificatesAPI.delete(id);
+                    } else if (type === 'contact') {
+                        await contactAPI.delete(id);
+                    } else if (type === 'learningTopic') {
+                        await learningAPI.delete(id);
+                    } else if (type === 'task') {
+                        await tasksAPI.delete(id);
+                    }
+                    fetchAllData();
+                } catch (error) {
+                    console.error('Delete error:', error);
+                }
             }
-            fetchAllData();
-        } catch (error) {
-            console.error('Delete error:', error);
-        }
+        });
     };
 
     const handleUpdateStatus = async (id, newStatus) => {
@@ -1376,6 +1381,46 @@ const Dashboard = () => {
                         <span className="font-semibold text-sm">{toast}</span>
                     </div>
                 )}
+
+                {confirmModal && (
+                    <div className="fixed inset-0 z-[100] bg-dark-950/70 backdrop-blur-md flex items-center justify-center p-4 animate-fade-in">
+                        <div className="max-w-md w-full bg-white dark:bg-dark-900 border border-dark-200 dark:border-dark-800 rounded-3xl p-6 text-center shadow-2xl relative overflow-hidden">
+                            {/* Background design glow */}
+                            <div className="absolute -right-10 -top-10 w-32 h-32 bg-primary-500/10 rounded-full blur-2xl pointer-events-none" />
+                            <div className="absolute -left-10 -bottom-10 w-32 h-32 bg-rose-500/10 rounded-full blur-2xl pointer-events-none" />
+
+                            {/* Warning Icon */}
+                            <div className="w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center mx-auto mb-4 border border-amber-500/25 animate-bounce-slow">
+                                <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                                </svg>
+                            </div>
+                            
+                            <h3 className="text-lg font-bold text-dark-900 dark:text-white mb-2">{confirmModal.title}</h3>
+                            <p className="text-xs text-dark-550 dark:text-dark-400 mb-6 leading-relaxed">
+                                {confirmModal.message}
+                            </p>
+                            
+                            <div className="flex gap-3">
+                                <button 
+                                    onClick={() => setConfirmModal(null)}
+                                    className="flex-1 py-3 rounded-xl border border-dark-200 dark:border-dark-850 hover:bg-dark-50 dark:hover:bg-dark-800 text-dark-700 dark:text-dark-300 text-xs font-semibold cursor-pointer transition-colors"
+                                >
+                                    Cancel
+                                </button>
+                                <button 
+                                    onClick={() => {
+                                        confirmModal.onConfirm();
+                                        setConfirmModal(null);
+                                    }}
+                                    className="flex-1 py-3 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold cursor-pointer shadow-lg shadow-amber-500/10 transition-colors"
+                                >
+                                    Confirm
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
         </div>
     );
diff --git a/client/src/pages/LatexResume.jsx b/client/src/pages/LatexResume.jsx
diff --git a/client/src/pages/Settings.jsx b/client/src/pages/Settings.jsx
